/*
  Moja Ordinacija - modern theme layer (2026 redesign)
  Loaded AFTER bootstrap.min.css / animate.css / style.css (Inspinia) so it
  wins the cascade. Retargets existing Inspinia/Bootstrap 3 classes
  (.ibox, .btn, .label/.badge, .table, .form-control) so every view inherits
  the new look without markup changes. Bespoke page markup (Pocetna, Karton)
  additionally uses the component classes defined at the bottom of this file.
*/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --mo-primary: #2F6FED;
    --mo-primary-dark: #1E52C8;
    --mo-primary-light: #E9F1FE;
    --mo-bg: #F5F7FB;
    --mo-card: #FFFFFF;
    --mo-border: #E8ECF3;
    --mo-text: #1B2437;
    --mo-text-muted: #7C8598;
    --mo-success: #17A673;
    --mo-success-bg: #E1F8EE;
    --mo-warning: #D99A2B;
    --mo-warning-bg: #FDF3DF;
    --mo-danger: #E3564B;
    --mo-danger-bg: #FCE9E7;
    --mo-purple: #7C5CFC;
    --mo-purple-bg: #EFEAFE;
    --mo-teal-bg: #E3F6F6;
    --mo-radius-lg: 18px;
    --mo-radius-md: 12px;
    --mo-radius-sm: 8px;
    --mo-radius-pill: 999px;
    --mo-shadow: 0 1px 2px rgba(20, 30, 60, 0.03), 0 6px 20px rgba(20, 30, 60, 0.06);
    --mo-shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.04);
}

/* ---------- Base ---------- */

html, body {
    background: var(--mo-bg) !important;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    color: var(--mo-text);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.font-bold {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--mo-text);
    font-weight: 700;
}

a {
    color: var(--mo-primary);
}

    a:hover, a:focus {
        color: var(--mo-primary-dark);
    }

#page-wrapper {
    background: var(--mo-bg) !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #D7DDE8;
    border-radius: var(--mo-radius-pill);
}

/* ---------- Cards (ibox / panel -> soft rounded card) ---------- */

.ibox {
    border: none;
    border-radius: var(--mo-radius-lg);
    box-shadow: var(--mo-shadow);
    background: var(--mo-card);
    margin-bottom: 22px;
}

.ibox-title {
    background: transparent;
    border-bottom: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-lg) var(--mo-radius-lg) 0 0;
    padding: 18px 22px;
}

    .ibox-title h5 {
        font-weight: 700;
        font-size: 15px;
        color: var(--mo-text);
    }

.ibox-content {
    border: none;
    border-radius: 0 0 var(--mo-radius-lg) var(--mo-radius-lg);
    padding: 22px;
    background: var(--mo-card);
}

.panel {
    border: none;
    border-radius: var(--mo-radius-lg);
    box-shadow: var(--mo-shadow);
}

.panel-heading {
    border-radius: var(--mo-radius-lg) var(--mo-radius-lg) 0 0 !important;
    border-bottom: 1px solid var(--mo-border);
}

.panel-default > .panel-heading {
    background: var(--mo-card);
    color: var(--mo-text);
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--mo-radius-sm);
    font-weight: 600;
    font-size: 13.5px;
    padding: 8px 18px;
    border: 1px solid transparent;
    transition: all .15s ease;
}

.btn-primary {
    background: var(--mo-primary);
    border-color: var(--mo-primary);
}

    .btn-primary:hover, .btn-primary:focus {
        background: var(--mo-primary-dark);
        border-color: var(--mo-primary-dark);
    }

.btn-white, .btn-default {
    background: var(--mo-card);
    border-color: var(--mo-border);
    color: var(--mo-text);
}

    .btn-white:hover, .btn-default:hover {
        background: #F1F4F9;
        color: var(--mo-text);
    }

.btn-success {
    background: var(--mo-success);
    border-color: var(--mo-success);
}

.btn-info {
    background: #3FA6D1;
    border-color: #3FA6D1;
    color: #fff;
}

.btn-warning {
    background: var(--mo-warning);
    border-color: var(--mo-warning);
    color: #fff;
}

.btn-danger {
    background: var(--mo-danger);
    border-color: var(--mo-danger);
}

.btn-xs {
    padding: 4px 10px;
    font-size: 12px;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 12.5px;
}

.ibox-tools {
    color: var(--mo-text-muted);
}

    /* :not(.btn) - some views put real action buttons (e.g. Radnici/Edit's
       "Ovlasti"/"Dodaj u grupu doktora!") inside .ibox-tools instead of the
       small icon-only links this rule was written for. Without the
       exclusion, this selector's higher specificity than a bare .btn class
       stomped their color/padding, leaving them as barely-padded gray text
       instead of proper colored buttons. */
    .ibox-tools a:not(.btn) {
        color: var(--mo-text-muted);
        padding: 0 6px;
    }

        .ibox-tools a:not(.btn):hover {
            color: var(--mo-primary);
        }

.btn-outline.btn-primary, .btn.btn-outline {
    background: transparent;
    color: var(--mo-primary);
    border-color: var(--mo-primary-light);
}

.btn-pill {
    border-radius: var(--mo-radius-pill);
}

/* ---------- Labels / badges / status pills ---------- */

.label, .badge {
    border-radius: var(--mo-radius-pill);
    font-weight: 600;
    font-size: 11.5px;
    padding: 4px 12px;
    letter-spacing: .02em;
}

.label-primary, .badge-primary {
    background: var(--mo-primary-light);
    color: var(--mo-primary);
}

.label-success, .badge-success {
    background: var(--mo-success-bg);
    color: var(--mo-success);
}

.label-warning, .badge-warning {
    background: var(--mo-warning-bg);
    color: var(--mo-warning);
}

.label-danger, .badge-danger {
    background: var(--mo-danger-bg);
    color: var(--mo-danger);
}

.label-info, .badge-info {
    background: var(--mo-purple-bg);
    color: var(--mo-purple);
}

/* ---------- Tables ---------- */

.table {
    color: var(--mo-text);
}

    .table > thead > tr > th {
        border-bottom: 1px solid var(--mo-border);
        color: var(--mo-text-muted);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 700;
        padding: 10px 14px;
    }

    .table > tbody > tr > td {
        border-top: 1px solid var(--mo-border);
        padding: 14px;
        vertical-align: middle;
    }

    .table-hover > tbody > tr:hover {
        background: #FAFBFD;
    }

/* ---------- Forms ---------- */

.form-control {
    border-radius: var(--mo-radius-sm);
    border: 1px solid var(--mo-border);
    box-shadow: none;
    font-size: 13.5px;
    height: 40px;
}

    .form-control:focus {
        border-color: var(--mo-primary);
        box-shadow: 0 0 0 3px var(--mo-primary-light);
    }

/* ---------- Shared components used by redesigned views ---------- */

.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mo-primary-light);
    color: var(--mo-primary);
    font-weight: 700;
    font-size: 15px;
    flex: none;
}

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--mo-radius-md);
    font-size: 18px;
    flex: none;
}

    .icon-badge.blue {
        background: var(--mo-primary-light);
        color: var(--mo-primary);
    }

    .icon-badge.green {
        background: var(--mo-success-bg);
        color: var(--mo-success);
    }

    .icon-badge.purple {
        background: var(--mo-purple-bg);
        color: var(--mo-purple);
    }

    .icon-badge.teal {
        background: var(--mo-teal-bg);
        color: #0E8484;
    }

.stat-card {
    background: var(--mo-card);
    border-radius: var(--mo-radius-lg);
    box-shadow: var(--mo-shadow);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
}

.stat-card-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.stat-card-label {
    font-size: 13px;
    color: var(--mo-text-muted);
    font-weight: 600;
}

.stat-card-trend {
    font-size: 12.5px;
    color: var(--mo-text-muted);
}

    .stat-card-trend .up {
        color: var(--mo-success);
        font-weight: 700;
    }

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F6F8FC;
    border-radius: var(--mo-radius-md);
    padding: 14px 16px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--mo-text);
    text-decoration: none;
    transition: background .15s ease;
}

    .quick-action-btn:hover {
        background: var(--mo-primary-light);
        color: var(--mo-primary);
        text-decoration: none;
    }

    .quick-action-btn i {
        color: var(--mo-primary);
    }

.status-pill {
    display: inline-block;
    border-radius: var(--mo-radius-pill);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .03em;
    padding: 4px 12px;
}

    .status-pill.open {
        background: var(--mo-success-bg);
        color: var(--mo-success);
    }

    .status-pill.active {
        background: var(--mo-success-bg);
        color: var(--mo-success);
    }

    .status-pill.closed {
        background: #EEF0F4;
        color: var(--mo-text-muted);
    }

/* Obojani kvadratic uz naziv statusa u select2 dropdownu (Poslovi/Details -
   izmjena statusa), boja dolazi iz tblStatusi.BojaStatusa preko data-boja
   atributa na <option>. */
.mo-status-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    flex: none;
}

/* ---------- Javne stranice za pacijenta (Patient/New, Update, UpdateCheck) ---------- */
.mo-pu { max-width: 640px; margin: 0 auto; padding: 18px 14px 40px; }
.mo-pu-zaglavlje { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mo-pu-zaglavlje img { max-height: 54px; max-width: 150px; object-fit: contain; }
.mo-pu-firma b { display: block; font-size: 15px; color: #1f2937; }
.mo-pu-firma span { font-size: 12.5px; color: #6b7280; }
.mo-pu-kartica { background: #fff; border: 1px solid #E5E9F2; border-radius: 16px; padding: 20px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.mo-pu-pozdrav h1 { font-size: 21px; font-weight: 800; margin: 0 0 6px; color: #1f2937; }
.mo-pu-pozdrav p { margin: 0; color: #4b5563; font-size: 14px; line-height: 1.5; }
.mo-pu-naslov { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #1f2937; }
.mo-pu-naslov .fa { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #EEF4FF; color: #2F6FED; font-size: 13px; }
.mo-pu-polja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mo-pu-polja .siroko { grid-column: 1 / -1; }
.mo-pu label { font-size: 12.5px; font-weight: 600; color: #4b5563; margin-bottom: 4px; }
.mo-pu .form-control { height: 44px; border-radius: 10px; font-size: 15px; }
.mo-pu .form-control[readonly] { background: #F7F9FC; color: #4b5563; }
/* Datum rođenja / upitnik: <input type="date"> (sistemski kalendar na mobitelu). iOS bi ga inače centrirao i suzio kad je prazan. */
.mo-pu input[type="date"].form-control { display: block; width: 100%; min-width: 0; line-height: 1.3; }
.mo-pu input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.mo-pu-izbor { display: flex; gap: 8px; }
.mo-pu-izbor label { flex: 1 1 0; margin: 0; }
.mo-pu-izbor input { position: absolute; opacity: 0; pointer-events: none; }
.mo-pu-izbor span { display: flex; align-items: center; justify-content: center; height: 44px; border: 1px solid #D5DBE6; border-radius: 10px; font-size: 14px; font-weight: 600; color: #4b5563; cursor: pointer; transition: all .15s; background: #fff; }
.mo-pu-izbor input:checked + span { border-color: #2F6FED; background: #EEF4FF; color: #2F6FED; }
.mo-pu-pitanje { padding: 14px 0; border-top: 1px solid #EEF1F6; }
.mo-pu-pitanje:first-of-type { border-top: 0; padding-top: 0; }
.mo-pu-pitanje > label { display: block; font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 8px; line-height: 1.4; }
.mo-pu-pitanje .opcionalno { font-weight: 400; color: #9aa2b1; font-size: 12px; }
.mo-pu-pitanje .mo-pu-opis { margin-top: 8px; }
.mo-pu-napomena { font-size: 12px; color: #6b7280; text-align: center; margin: 12px 0 0; }
.mo-pu-spremi { width: 100%; height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.mo-pu-hvala { text-align: center; padding: 34px 20px; }
.mo-pu-hvala .fa { font-size: 46px; color: #17A673; margin-bottom: 10px; }
.mo-pu-hvala h2 { font-size: 21px; font-weight: 800; margin: 0 0 6px; color: #1f2937; }
.mo-pu-hvala p { color: #4b5563; margin: 0; }
/* Ulazni korak: sigurnosni ključ (New) / zadnje 4 cifre + inicijali (UpdateCheck) */
.mo-pu-ulaz { text-align: center; padding: 28px 20px; }
.mo-pu-ulaz .mo-pu-ikona { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #EEF4FF; color: #2F6FED; font-size: 22px; margin-bottom: 12px; }
.mo-pu-ulaz h1 { font-size: 21px; font-weight: 800; margin: 0 0 6px; color: #1f2937; }
.mo-pu-ulaz p { color: #4b5563; margin: 0 auto 18px; max-width: 420px; font-size: 14px; line-height: 1.5; }
.mo-pu-ulaz-polja { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mo-pu-ulaz-polja > div { text-align: left; }
.mo-pu .form-control.mo-pu-kod { width: 150px; height: 64px; text-align: center; font-size: 30px; font-weight: 800; letter-spacing: .25em; border-radius: 14px; }
.mo-pu .form-control.mo-pu-kod-mali { width: 110px; letter-spacing: .15em; font-size: 24px; text-transform: uppercase; }
.mo-pu-greska { color: #E3564B; font-size: 13px; font-weight: 600; min-height: 18px; margin: 0 0 10px; }
.mo-pu-ulaz .mo-pu-spremi { max-width: 320px; }
/* eKarton (Patient/eKarton) - šira varijanta .mo-pu */
.mo-pu.mo-pu-siroko { max-width: 1040px; }
.mo-ek-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.mo-ek-grid > .mo-pu-kartica { margin-bottom: 0; }
.mo-ek-oznaka { font-size: 12px; font-weight: 700; color: #2F6FED; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.mo-ek-pacijent h1 { font-size: 24px; font-weight: 800; color: #1f2937; margin: 0 0 4px; }
.mo-ek-meta { font-size: 13px; color: #6b7280; margin-bottom: 14px; }
.mo-ek-podaci { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #374151; }
.mo-ek-podaci .fa { width: 18px; color: #2F6FED; text-align: center; margin-right: 6px; }
.mo-ek-napomena { margin-top: 16px; padding-top: 14px; border-top: 1px solid #EEF1F6; font-size: 14px; color: #374151; line-height: 1.5; }
.mo-ek-napomena-naslov { font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.mo-ek-napomena p { margin: 0 0 6px; }
.mo-ek-dento { text-align: center; }
.mo-ek-dento svg, .mo-ek-dento img { max-width: 100%; height: auto; }
.mo-ek-dento + .mo-ek-dento { margin-top: 12px; }
.mo-ek-lista { display: flex; flex-direction: column; }
.mo-ek-stavka { padding: 12px 0; border-top: 1px solid #EEF1F6; }
.mo-ek-stavka:first-child { border-top: 0; padding-top: 0; }
.mo-ek-stavka-glava { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.mo-ek-stavka-naziv { font-size: 15px; font-weight: 700; color: #1f2937; }
.mo-ek-stavka-sub { font-size: 13px; color: #6b7280; margin-top: 2px; }
.mo-ek-datum { flex: none; font-size: 12px; font-weight: 600; color: #2F6FED; background: #EEF4FF; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.mo-ek-zubi { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mo-ek-zub { padding: 2px 8px; border-radius: 8px; background: #EEF4FF; color: #1e429f; font-size: 12px; font-weight: 700; }
.mo-ek-opis { margin-top: 8px; font-size: 14px; color: #374151; line-height: 1.5; overflow-wrap: anywhere; }
.mo-ek-opis p { margin: 0 0 6px; }
.mo-ek-prazno { color: #6b7280; font-size: 14px; }
/* Detalji usluge: oznaka | vrijednost (Doktor, Zubi, Dijagnoza, polja usluge, napomena, bilješke). */
.mo-ek-glava-desno { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.mo-ek-datum .fa { margin-right: 3px; }
.mo-ek-status { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; color: var(--mo-ek-boja); background: #F3F4F6; background: color-mix(in srgb, var(--mo-ek-boja) 12%, #fff); border: 1px solid color-mix(in srgb, var(--mo-ek-boja) 30%, #fff); }
.mo-ek-detalji { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 14px; margin: 12px 0 0; font-size: 14px; }
.mo-ek-detalji dt { font-weight: 600; color: #6b7280; font-size: 13px; padding-top: 1px; }
.mo-ek-detalji dt .fa { width: 14px; color: #2F6FED; }
.mo-ek-detalji dd { margin: 0; color: #1f2937; line-height: 1.5; overflow-wrap: anywhere; }
.mo-ek-detalji dd.mo-ek-tekst { white-space: pre-line; }
.mo-ek-detalji .mo-ek-zubi, .mo-ek-detalji .mo-ek-opis { margin-top: 0; }
.mo-ek-istaknuto { font-weight: 700; }
.mo-ek-zub { display: inline-flex; align-items: baseline; gap: 6px; }
.mo-ek-zub small { font-size: 11px; font-weight: 500; color: #4b5b8a; }
.mo-ek-biljeska + .mo-ek-biljeska { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #E5E9F2; }
.mo-ek-biljeska-autor { font-size: 12px; color: #6b7280; }
.mo-ek-legenda { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #EEF1F6; font-size: 12px; color: #6b7280; line-height: 1.5; }
.mo-ek-saglasnost { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.mo-ek-dugmad { display: flex; gap: 6px; flex: none; }
@media (max-width: 767px) {
    .mo-ek-grid { grid-template-columns: minmax(0, 1fr); }
    .mo-ek-pacijent h1 { font-size: 21px; }
    .mo-ek-dugmad { width: 100%; }
    .mo-ek-dugmad .btn { flex: 1 1 0; }
    /* Klinički panel već ima svoje kartice - bez vanjske kartice oko njih (kartica u kartici jede širinu). */
    .mo-pu-kartica { padding: 16px; }
    .mo-pu-kartica.mo-ek-klinicki-panel { padding: 0; border: 0; background: none; box-shadow: none; }
    .mo-ek-stavka-glava { flex-wrap: wrap; gap: 6px; }
    .mo-ek-glava-desno { flex-direction: row; align-items: center; }
    .mo-ek-detalji { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .mo-ek-detalji dd { margin-bottom: 8px; }
}
@media print {
    .mo-pu-kartica { box-shadow: none; break-inside: avoid; }
    .mo-ek-dugmad { display: none; }
}
.mo-pu-zamka { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .mo-pu-polja { grid-template-columns: minmax(0, 1fr); } }

/* ---------- QR plakati za recepciju (Stranke/QrCode, QrCodePatientUpdate, QrCodePatient) ---------- */
.mo-qr-info {
    display: flex; align-items: center; gap: 14px; max-width: 720px; margin: 0 auto 18px; padding: 14px 18px;
    background: var(--mo-primary-light); border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); color: var(--mo-text);
}
.mo-qr-info .fa { font-size: 20px; color: var(--mo-primary); }
.mo-qr-kljuc { margin-left: auto; font-size: 30px; font-weight: 800; letter-spacing: .15em; color: var(--mo-primary); }
.mo-qr-plakat {
    max-width: 720px; margin: 0 auto; padding: 40px 36px 30px; text-align: center;
    background: #fff; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-lg); box-shadow: var(--mo-shadow);
}
.mo-qr-logo { max-height: 90px; max-width: 260px; object-fit: contain; margin-bottom: 14px; }
.mo-qr-firma { font-size: 15px; font-weight: 700; color: var(--mo-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.mo-qr-plakat h1 { font-size: 34px; font-weight: 800; color: var(--mo-text); margin: 0 0 8px; line-height: 1.15; }
.mo-qr-plakat .mo-qr-pod { font-size: 17px; color: var(--mo-text-muted); margin: 0 0 24px; }
.mo-qr-kod { display: inline-block; padding: 14px; border: 2px solid var(--mo-border); border-radius: 20px; margin-bottom: 24px; }
.mo-qr-kod img { width: 280px; height: 280px; display: block; }
.mo-qr-koraci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: left; margin-bottom: 26px; }
.mo-qr-korak { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--mo-text); line-height: 1.4; }
.mo-qr-korak b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mo-primary); color: #fff; font-size: 14px; }
.mo-qr-dno { border-top: 1px solid var(--mo-border); padding-top: 14px; font-size: 13px; color: var(--mo-text-muted); }
.mo-qr-dno strong { color: var(--mo-text); }
@media (max-width: 767px) {
    .mo-qr-plakat { padding: 26px 16px 20px; }
    .mo-qr-plakat h1 { font-size: 25px; }
    .mo-qr-koraci { grid-template-columns: minmax(0, 1fr); }
    .mo-qr-kod img { width: 220px; height: 220px; }
}
.mo-qr-meni { min-width: 290px; }
.mo-qr-meni > li > a { display: flex !important; align-items: flex-start; gap: 12px; padding: 10px 14px !important; white-space: normal; }
.mo-qr-meni > li > a > .fa { width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mo-primary-light); color: var(--mo-primary); }
.mo-qr-meni b { display: block; color: var(--mo-text); }
.mo-qr-meni small { display: block; color: var(--mo-text-muted); font-size: 12px; line-height: 1.35; }
@media print {
    body * { visibility: hidden !important; }
    .mo-qr-plakat, .mo-qr-plakat * { visibility: visible !important; }
    .mo-qr-plakat { position: absolute; left: 0; top: 0; width: 100%; max-width: none; border: 0; box-shadow: none; padding: 10mm 12mm; }
    .mo-qr-korak b { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    @page { size: A4 portrait; margin: 10mm; }
}

/* ---------- Popup "Pošalji e-mailom" (račun / ponuda, Views/Shared/_SlanjeDokumentaEmailom) ---------- */
.mo-em-zaglavlje { display: flex; align-items: center; gap: 12px; text-align: left; }
.mo-em-zaglavlje .close { order: 3; margin-left: auto; }
.mo-em-zaglavlje .modal-title { margin: 0; font-weight: 700; }
.mo-em-zaglavlje small { color: var(--mo-text-muted); }
.mo-em-ikona { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mo-primary-light); color: var(--mo-primary); font-size: 17px; }
.mo-em-pomoc { display: block; margin-top: 4px; color: var(--mo-text-muted); font-size: 12px; }
.mo-em-opcionalno { font-weight: 400; color: var(--mo-text-muted); font-size: 12px; }
.mo-em-sadrzaj { padding: 12px 14px; border-radius: var(--mo-radius-md); background: var(--mo-bg); border: 1px solid var(--mo-border); font-size: 13px; }
.mo-em-sadrzaj-naslov { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mo-text-muted); margin-bottom: 6px; }
.mo-em-sadrzaj ul { list-style: none; margin: 0; padding: 0; }
.mo-em-sadrzaj li { padding: 3px 0; color: var(--mo-text); }
.mo-em-sadrzaj li .fa { width: 18px; color: var(--mo-primary); }
.mo-em-pacijent { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--mo-border); color: var(--mo-text-muted); }
.mo-em-greska { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--mo-radius-sm); background: var(--mo-danger-bg); color: var(--mo-danger); font-weight: 600; font-size: 13px; }

/* ---------- Popup "Status usluge" (Poslovi/Index grid, klik na status) ---------- */
.mo-sp { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 2px; }
.mo-sp-usluga {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; background: var(--mo-bg); border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md);
}
.mo-sp-usluga-txt { min-width: 0; }
.mo-sp-usluga-naziv { font-weight: 700; color: var(--mo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-sp-usluga-pacijent { font-size: 12px; color: var(--mo-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-sp-trenutni {
    flex: none; padding: 4px 10px; border-radius: var(--mo-radius-pill); background: var(--mo-text-muted);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.mo-sp-label { font-size: 12px; font-weight: 600; color: var(--mo-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: -6px; }
.mo-sp-statusi { display: flex; flex-direction: column; gap: 8px; }
.mo-sp-status {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 14px; text-align: left;
    background: var(--mo-card); border: 1.5px solid var(--mo-border); border-radius: var(--mo-radius-md);
    color: var(--mo-text); font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s;
}
.mo-sp-status:hover { border-color: var(--mo-primary); }
.mo-sp-status.active { border-color: var(--mo-primary); background: var(--mo-primary-light); }
.mo-sp-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mo-sp-status-naziv { flex: 1; }
.mo-sp-tag { font-size: 11px; font-weight: 600; color: var(--mo-text-muted); background: var(--mo-bg); border-radius: var(--mo-radius-pill); padding: 2px 8px; }
.mo-sp-kvacica { color: var(--mo-primary); visibility: hidden; }
.mo-sp-status.active .mo-sp-kvacica { visibility: visible; }
.mo-sp-skupno { border-top: 1px solid var(--mo-border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.mo-sp-check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; color: var(--mo-text); cursor: pointer; }
.mo-sp-check input { margin: 0; width: 16px; height: 16px; }
.mo-sp-izvor { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-sp-izvor-btn {
    padding: 6px 12px; border-radius: var(--mo-radius-pill); border: 1px solid var(--mo-border);
    background: var(--mo-card); color: var(--mo-text); font-size: 12px; font-weight: 600; cursor: pointer;
}
.mo-sp-izvor-btn.active { background: var(--mo-primary); border-color: var(--mo-primary); color: #fff; }
.mo-sp-broj {
    margin-top: 8px; padding: 10px 12px; border-radius: var(--mo-radius-sm);
    background: var(--mo-warning-bg); color: var(--mo-text); font-size: 13px;
}
.mo-sp-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }

/* ---------- Unified top header (replaces Inspinia left sidebar) ---------- */

html body #wrapper,
html body.mini-navbar #wrapper,
html body.fixed-nav #wrapper,
html body.fixed-sidebar #wrapper,
html body.canvas-menu #wrapper,
html body.top-navigation #wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body #page-wrapper,
html body.mini-navbar #page-wrapper,
html body.fixed-nav #page-wrapper,
html body.fixed-nav #wrapper #page-wrapper,
html body.fixed-sidebar #page-wrapper,
html body.canvas-menu #page-wrapper,
html body.top-navigation.fixed-nav #wrapper #page-wrapper {
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    position: relative !important;
    min-height: 100vh;
    /* Inspinia's base #page-wrapper still carries `padding: 0 15px` on
       desktop widths (only the <=767px media query below zeroes it out) -
       that 15px silently stacks on top of the header's own 28px and the
       content area's own 20px, so the header background never reaches the
       real viewport edge and every section reads as shifted in from it.
       Every section already manages its own horizontal padding
       (.mo-header-inner, .wrapper/.wrapper-content), so page-wrapper itself
       should contribute none. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 50px;
    box-sizing: border-box;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

html body .navbar-static-side,
html body.fixed-sidebar .navbar-static-side,
html body.canvas-menu .navbar-static-side,
html body.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
    display: none !important;
    width: 0 !important;
}

html body,
html body.md-skin,
html body.skin-1,
html body.skin-2,
html body.skin-3 {
    background: var(--mo-bg) !important;
}

.mo-header {
    background: var(--mo-card);
    border-bottom: 1px solid var(--mo-border);
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Zaključana gornja traka: sticky iznad nije radio jer style.css daje
   #wrapper/body overflow-x:hidden, a to prisilno pravi overflow-y:auto -
   roditelj postaje scroll kontejner pa se header "lijepio" za njega, ne za
   prozor. overflow-x:clip siječe isto, ali ne pravi scroll kontejner.
   html,body{height:100%} (style.css) se mijenja u min-height da body ne
   bude kutija visine ekrana s unutrašnjim skrolom (isto kao u mojUred). */
#wrapper,
body {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

html, body {
    height: auto !important;
    min-height: 100% !important;
}

/* Match the visual breathing room the header has above/below its own nav
   row (64px bar, centered content) below the header too, so every page -
   whether it uses .page-heading or not - gets the same gap under the menu. */
#content-wrap {
    padding-top: 18px;
    display: block;
}

/* jQuery UI autocomplete dropdown (patient search) - sits above everything,
   with a small gap so it doesn't visually merge with the search input */
.ui-autocomplete {
    z-index: 2000 !important;
    margin-top: 6px;
    border: 1px solid var(--mo-border) !important;
    border-radius: var(--mo-radius-md) !important;
    box-shadow: var(--mo-shadow) !important;
    padding: 6px !important;
}

    .ui-autocomplete .ui-menu-item > div,
    .ui-autocomplete .ui-menu-item-wrapper {
        border-radius: var(--mo-radius-sm) !important;
        padding: 8px 10px !important;
    }

.mo-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 28px;
    height: 64px;
}

/* Logo + hamburger na lijevoj strani i .mo-actions na desnoj dijele isti flex:1,
   tako da .mo-nav (flex:none) ispadne stvarno centriran bez obzira na to koliko
   je koja strana široka (npr. broj aktivnih modula u meniju varira po ordinaciji). */
.mo-header-brand {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
}

.mo-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 17px;
    color: var(--mo-text);
    flex: none;
    transition: transform .2s ease;
}

    .mo-logo:hover {
        color: var(--mo-text);
        text-decoration: none;
        transform: translateY(-1px);
    }

    .mo-logo img {
        height: 28px;
        width: auto;
    }

.mo-logo-accent {
    background: linear-gradient(90deg, var(--mo-primary) 0%, #6FA3F5 50%, var(--mo-primary) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--mo-primary);
    animation: mo-logo-shimmer 5s ease-in-out infinite;
}

@keyframes mo-logo-shimmer {
    0%, 100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

.mo-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .mo-nav > li {
        list-style: none;
    }

    .mo-nav > li > a, .mo-nav > li > .mo-nav-link {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 8px 12px;
        border-radius: var(--mo-radius-sm);
        font-weight: 600;
        font-size: 13.5px;
        color: var(--mo-text-muted);
        white-space: nowrap;
        cursor: pointer;
    }

        .mo-nav > li > a:hover, .mo-nav > li > .mo-nav-link:hover {
            color: var(--mo-primary);
            text-decoration: none;
            background: var(--mo-primary-light);
        }

    .mo-nav > li.active > a {
        color: var(--mo-primary);
    }

.mo-search {
    flex: 1 1 auto;
    max-width: 340px;
}

    .mo-search .form-control {
        border-radius: var(--mo-radius-pill);
        background: var(--mo-bg);
        border-color: var(--mo-bg);
        padding-left: 16px;
    }

.mo-search-input-wrap {
    position: relative;
    display: table-cell;
    width: 100%;
}

    .mo-search-input-wrap .form-control {
        padding-right: 30px;
    }

.mo-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    /* Bootstrap diže .input-group .form-control:focus na z-index:3, pa mora
       ici iznad toga ili nestane cim se input fokusira. */
    z-index: 4;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0 4px;
    line-height: 1;
    font-size: 20px;
    color: var(--mo-text-muted);
    cursor: pointer;
}

    .mo-search-clear:hover {
        color: var(--mo-text);
    }

.mo-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}

    .mo-actions .navbar-top-links {
        display: flex;
        align-items: center;
        gap: 2px;
        margin: 0;
    }

        .mo-actions .navbar-top-links > li {
            list-style: none;
        }

    .mo-actions .dropdown-toggle.count-info {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        color: var(--mo-text-muted);
        font-size: 16px;
    }

        .mo-actions .dropdown-toggle.count-info:hover {
            background: var(--mo-bg);
        }

        .mo-actions .dropdown-toggle.count-info .label {
            position: absolute;
            top: 2px;
            right: 2px;
            background: var(--mo-danger);
            color: #fff;
            font-size: 10px;
            padding: 1px 5px;
            min-width: 16px;
        }

.mo-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: var(--mo-radius-pill);
    cursor: pointer;
}

    .mo-profile:hover {
        background: var(--mo-bg);
    }

    .mo-profile img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: cover;
    }

.mo-profile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--mo-text);
    line-height: 1.2;
}

.mo-profile-email {
    font-size: 11.5px;
    color: var(--mo-text-muted);
    line-height: 1.2;
}

@media (max-width: 1400px) {
    .mo-nav > li > a span.mo-label {
        display: none;
    }
}

/* ---------- Pocetna dashboard helpers ---------- */

.mo-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0;
}

    /* Bootstrap .row:before/:after je clearfix (display:table) za float-based
       grid - u display:flex kontekstu to postaje nevidljivi flex-item na
       pocetku/kraju reda, pa "pojede" po jedan gap na svakoj strani i cijeli
       red ispadne uvucen u odnosu na sekciju ispod. */
    .mo-stat-row::before,
    .mo-stat-row::after {
        display: none;
    }

/* Suptilan "otkucaj" na satu svakih 5s - poklapa se sa setInterval(doDate,1000)
   koji svaku sekundu upisuje novo vrijeme, samo je vizuelni pulse rjeđi. */
#mo-clock-card {
    animation: mo-clock-pulse 5s ease-in-out infinite;
}

@keyframes mo-clock-pulse {
    0%, 90% {
        transform: scale(1);
    }
    95% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

.mo-stat-col {
    flex: 1 1 220px;
    padding: 0 !important;
}

/* ---------- Bento-style stat row (Poslovi/Index): one hero card with a
   completion-rate ring on the left, two mini cards + a wide card stacked
   on the right, all matching the taller side's combined height. ---------- */

.mo-stat-row-v2 {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 14px;
}

.mo-stat-col-v2 {
    display: flex;
    flex-direction: column;
}

.mo-stat-col-hero {
    flex: 1 1 380px;
}

.mo-stat-col-side {
    flex: 1 1 480px;
    gap: 12px;
}

.stat-hero-card {
    flex: 1;
    background: linear-gradient(135deg, var(--mo-primary-light) 0%, var(--mo-card) 70%);
    border-radius: var(--mo-radius-lg);
    box-shadow: var(--mo-shadow);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform .18s ease, box-shadow .18s ease;
}

    .stat-hero-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(20, 30, 60, 0.12);
    }

.stat-hero-text .icon-badge {
    width: 32px;
    height: 32px;
    font-size: 14px;
    margin-bottom: 6px;
}

.stat-hero-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--mo-text);
    line-height: 1;
    margin: 3px 0 5px;
}

.stat-hero-ring {
    position: relative;
    flex: none;
}

    .stat-hero-ring svg {
        width: 64px;
        height: 64px;
    }

.stat-ring-track {
    fill: none;
    stroke: var(--mo-primary-light);
    stroke-width: 8;
}

.stat-ring-fill {
    fill: none;
    stroke: var(--mo-primary);
    stroke-width: 8;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset .6s ease;
}

.stat-ring-spark {
    fill: none;
    stroke: var(--mo-primary);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .55;
}

.stat-mini-row {
    display: flex;
    gap: 12px;
}

.stat-mini-card {
    flex: 1 1 0;
    background: var(--mo-card);
    border-radius: var(--mo-radius-lg);
    box-shadow: var(--mo-shadow);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform .18s ease, box-shadow .18s ease;
}

    .stat-mini-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(20, 30, 60, 0.12);
    }

    .stat-mini-card .icon-badge,
    .stat-wide-card .icon-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
        flex: none;
    }

.stat-mini-value {
    font-size: 19px;
    font-weight: 800;
    color: var(--mo-text);
    line-height: 1;
    margin: 3px 0 4px;
}

.stat-wide-card {
    flex: 1;
    background: var(--mo-card);
    border-radius: var(--mo-radius-lg);
    box-shadow: var(--mo-shadow);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform .18s ease, box-shadow .18s ease;
}

    .stat-wide-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(20, 30, 60, 0.12);
    }

.stat-wide-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--mo-primary);
    margin: 2px 0 3px;
}

.stat-card-trend .down {
    color: var(--mo-danger);
    font-weight: 700;
}

.mo-trend-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mo-text-muted);
    margin-right: 2px;
}

@media (max-width: 767px) {
    /* Bento stat red (Usluge/Računi/Ponude/Pacijenti) na mobitelu je samo višak
       koji gura listu na drugi ekran - sakriven, lista i filteri kreću odmah. */
    .mo-stat-row-v2 {
        display: none !important;
    }

    /* Pocetna mobilni redoslijed: Brze akcije (pretraga pacijenta) -> statistika
       -> današnji raspored -> pacijenti u liječenju. Omotači (wrapper/row/kolona)
       postaju display:contents pa se blokovi slažu preko order-a u .mo-home. */
    .mo-home {
        display: flex;
        flex-direction: column;
        padding: 0 12px;
    }

    .mo-home-stats-wrap,
    .mo-home-main-wrap,
    .mo-home-row,
    .mo-home-side {
        display: contents;
    }

    .mo-home-quick {
        order: 1;
    }

    .mo-home-stats {
        order: 2;
        margin-bottom: 16px !important;
    }

    .mo-home-cal {
        order: 3;
        padding: 0 !important;
    }

        .mo-home-cal .ibox-title > h5 {
            display: none;
        }

    .mo-home-patients {
        order: 4;
    }

    /* Liste (grid<->kartice stranice): bez vanjske kartice oko kartica -
       kartice leže direktno na pozadini stranice, cijela kartica je klikabilna. */
    .ibox:has(> .ibox-content > .mo-mobile-only),
    .ibox:has(> .ibox-content > .mo-mobile-only) > .ibox-content {
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .mo-list-search {
        max-width: none;
        margin-bottom: 12px;
    }

        .mo-list-search .form-control {
            height: 44px;
            border-radius: var(--mo-radius-pill);
            padding-left: 18px;
            background: var(--mo-card);
        }

    .mo-list-view {
        gap: 10px;
    }

    .mo-list-card {
        cursor: pointer;
        padding: 14px;
        gap: 8px;
        box-shadow: var(--mo-shadow-sm);
    }

        .mo-list-card:active {
            transform: scale(.99);
            background: #FAFBFD;
        }

    .mo-list-card-footer {
        padding-top: 8px;
        margin-top: 0;
    }

    /* Termini: filter doktora + ikonica brisanja u jednom redu, kalendar
       preko cijele širine kartice */
    .mo-termini-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 !important;
    }

        .mo-termini-toolbar > [class*="col-"] {
            padding: 0 !important;
            margin: 0 !important;
            width: auto;
        }

            .mo-termini-toolbar > [class*="col-"]:first-child {
                flex: 1 1 auto;
                min-width: 0;
            }

        .mo-termini-toolbar .btn-danger {
            float: none !important;
            font-size: 0;
            width: 44px;
            height: 40px;
            padding: 0;
        }

            .mo-termini-toolbar .btn-danger .fa {
                font-size: 15px;
            }

    .mo-termini-box > .ibox-title {
        padding: 12px;
    }

        .mo-termini-box > .ibox-title .ibox-tools {
            float: none;
            position: static;
        }

    .mo-termini-box > .ibox-content {
        padding: 0;
        overflow: hidden;
    }

    /* sat na početnoj - telefon ga ionako ima u statusnoj traci */
    .mo-stat-col:has(#mo-clock-card) {
        display: none;
    }

    .mo-home .stat-card {
        padding: 12px 14px;
        gap: 8px;
    }

    .mo-home .stat-card-value {
        font-size: 22px;
    }

    .mo-home .stat-card .icon-badge {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Pocetna: 4 stat kartice u mreži 2x2 umjesto 4 pune širine jedna ispod druge */
    .mo-stat-row {
        gap: 10px !important;
    }

    .mo-stat-col {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }
}

.mo-pill-tabs {
    display: flex;
    gap: 4px;
    border: none;
    background: var(--mo-bg);
    border-radius: var(--mo-radius-pill);
    padding: 4px;
    margin: 0;
}

    .mo-pill-tabs > li {
        list-style: none;
        float: none;
    }

        .mo-pill-tabs > li > a {
            border: none !important;
            border-radius: var(--mo-radius-pill) !important;
            padding: 6px 16px !important;
            font-size: 13px;
            font-weight: 700;
            color: var(--mo-text-muted);
            background: transparent !important;
            margin: 0 !important;
        }

/* ---------- App-wide: page headers, modals, dropdowns, tabs, alerts, tables, misc (covers ~all 350 views via shared Bootstrap/Inspinia classes) ---------- */

.page-heading {
    background: transparent !important;
    border-bottom: none !important;
    /* padding-left/right intentionally NOT touched here - .page-heading also
       carries the "wrapper" class, and its 20px left/right padding (see
       .wrapper-content above) is what keeps the title/buttons lined up with
       the card below. An earlier shorthand `padding: 4px 0 6px !important`
       here zeroed the left/right sides too and quietly broke that
       alignment - only override the vertical padding. */
    padding-top: 4px !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
}

.page-heading + .wrapper-content,
.page-heading + .wrapper.wrapper-content {
    padding-top: 6px !important;
}

/* Inspinia's base .wrapper-content (20px 10px 5px) has different left/right
   padding than .wrapper (0 20px) used by .page-heading, even though both
   sit in the same #page-wrapper column - the mismatch reads as the card
   below the title being indented differently than the title itself.
   Force both to the same horizontal padding so page-heading content and the
   cards beneath it line up on the same left/right edge. */
.wrapper, .wrapper-content {
    padding-left: 25px;
    padding-right: 25px;
}

    .page-heading h2 {
        margin: 0 0 6px;
        font-size: 22px;
    }

    .page-heading .breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0;
        font-size: 12.5px;
        color: var(--mo-text-muted);
    }

.title-action {
    padding-top: 0 !important;
}

.modal-content {
    border: none;
    border-radius: var(--mo-radius-lg);
    box-shadow: 0 20px 60px rgba(20, 30, 60, 0.25);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--mo-border);
    padding: 18px 22px;
}

.modal-footer {
    border-top: 1px solid var(--mo-border);
    padding: 14px 22px;
}

.modal-body {
    padding: 22px;
}

.dropdown-menu {
    border: none;
    border-radius: var(--mo-radius-md);
    box-shadow: var(--mo-shadow);
    padding: 6px;
}

    .dropdown-menu > li > a {
        border-radius: var(--mo-radius-sm);
        padding: 8px 12px;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--mo-text);
    }

        .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
            background: var(--mo-bg);
            color: var(--mo-text);
        }

    .dropdown-menu > .divider {
        background: var(--mo-border);
        margin: 6px 0;
    }

.nav-tabs {
    border-bottom: 1px solid var(--mo-border);
}

    .nav-tabs > li > a {
        border: none !important;
        background: transparent !important;
        color: var(--mo-text-muted);
        font-weight: 600;
        font-size: 13.5px;
        border-radius: 0 !important;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        border: none !important;
        border-bottom: 2px solid var(--mo-primary) !important;
        color: var(--mo-primary);
        background: transparent !important;
    }

.alert {
    border: none;
    border-radius: var(--mo-radius-md);
    font-size: 13.5px;
}

.alert-success {
    background: var(--mo-success-bg);
    color: var(--mo-success);
}

.alert-danger {
    background: var(--mo-danger-bg);
    color: var(--mo-danger);
}

.alert-warning {
    background: var(--mo-warning-bg);
    color: var(--mo-warning);
}

.alert-info {
    background: var(--mo-primary-light);
    color: var(--mo-primary);
}

.well {
    background: var(--mo-bg);
    border: none;
    border-radius: var(--mo-radius-md);
    box-shadow: none;
}

.dl-horizontal dt {
    color: var(--mo-text-muted);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.dl-horizontal dd {
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--mo-radius-sm);
    border: 1px solid var(--mo-border);
    height: auto;
    padding: 6px 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--mo-radius-sm) !important;
    border: 1px solid transparent !important;
    margin-left: 3px;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--mo-primary) !important;
        border-color: var(--mo-primary) !important;
        color: #fff !important;
    }

.pagination > li > a,
.pagination > li > span {
    border-radius: var(--mo-radius-sm) !important;
    margin: 0 2px;
    border-color: var(--mo-border);
    color: var(--mo-text);
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--mo-primary) !important;
    border-color: var(--mo-primary) !important;
}

        .mo-pill-tabs > li.active > a {
            background: var(--mo-card) !important;
            color: var(--mo-primary) !important;
            box-shadow: var(--mo-shadow-sm);
        }

/* ---------- Subtle motion: load-in reveal + hover feedback on interactive elements only ---------- */

@keyframes mo-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* fill-mode is "backwards", not "both": "both" would leave the keyframe's
   final `transform: translateY(0)` permanently specified on the element
   even after the animation finishes, and CSS makes ANY element with a
   specified `transform` a new containing block for `position: fixed`
   descendants - Bootstrap modals/backdrops nested inside an .ibox (e.g.
   Karton's document-preview popup) would then position themselves
   relative to that card instead of the viewport, appearing off in the
   wrong spot with an inert backdrop stuck over the page. "backwards"
   still prevents the pre-animation flash (via the delay stagger below)
   but cleanly drops the transform once the animation completes. */
.ibox, .stat-card, .panel {
    animation: mo-fade-up .35s ease backwards;
}

/* stagger cards that sit side-by-side in the same row so they cascade in
   instead of popping together - purely cosmetic, capped at 6 columns */
.row > div:nth-child(1) > .ibox, .row > div:nth-child(1) > .stat-card, .row > div:nth-child(1) > .panel { animation-delay: 0s; }
.row > div:nth-child(2) > .ibox, .row > div:nth-child(2) > .stat-card, .row > div:nth-child(2) > .panel { animation-delay: .05s; }
.row > div:nth-child(3) > .ibox, .row > div:nth-child(3) > .stat-card, .row > div:nth-child(3) > .panel { animation-delay: .1s; }
.row > div:nth-child(4) > .ibox, .row > div:nth-child(4) > .stat-card, .row > div:nth-child(4) > .panel { animation-delay: .15s; }
.row > div:nth-child(5) > .ibox, .row > div:nth-child(5) > .stat-card, .row > div:nth-child(5) > .panel { animation-delay: .2s; }
.row > div:nth-child(6) > .ibox, .row > div:nth-child(6) > .stat-card, .row > div:nth-child(6) > .panel { animation-delay: .25s; }

.btn, .quick-action-btn, .status-pill, .avatar-circle {
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.quick-action-btn:hover {
    transform: translateY(-1px);
}

.agile-list li {
    transition: background .15s ease, transform .15s ease;
}

.mo-nav > li > a, .mo-profile, .mo-actions .dropdown-toggle.count-info {
    transition: background .15s ease, color .15s ease;
}

/* tab content: gentle fade when a Bootstrap tab becomes active - same
   "backwards" reasoning as .ibox above (avoid a lingering transform that
   would break position:fixed modals nested inside the tab, like Karton's
   document-preview popup). */
.tab-pane.active {
    animation: mo-fade-up .25s ease backwards;
}

@media (prefers-reduced-motion: reduce) {
    .ibox, .stat-card, .panel, .tab-pane.active, .mo-logo-accent {
        animation: none !important;
    }

    .btn, .quick-action-btn, .status-pill, .avatar-circle, .agile-list li, .mo-nav > li > a, .mo-profile, .mo-actions .dropdown-toggle.count-info, .mo-logo, .stat-hero-card, .stat-mini-card, .stat-wide-card {
        transition: none !important;
    }
}

/* Page-load progress bar (Pace.js, already wired in via ~/bundles/inspinia) -
   recolored to match the new palette. Replaces the old full-screen preloader. */
.pace .pace-progress {
    background: var(--mo-primary);
    height: 3px;
}

/* ---------- Auth pages (Login/Register/ForgotPassword hero split) ---------- */

.bg-primary {
    background-color: var(--mo-primary) !important;
}

.badge-primary {
    background-color: var(--mo-primary);
}

.mojerp-login .btn-success {
    background: var(--mo-primary);
    border-color: var(--mo-primary);
}

.mojerp-login a.btn-link {
    color: var(--mo-primary);
}

.mojerp-login .naslov-h3 {
    font-weight: 800;
}

/* ---------- Grid <-> list view toggle ---------- */

/* Grid on desktop, card list on mobile - no manual toggle, pure responsive.
   Default (desktop-first): show grid, hide list. */
.mo-mobile-only {
    display: none;
}

.mo-desktop-only {
    display: block;
}

@media (max-width: 767px) {
    .mo-mobile-only {
        display: block;
    }

    .mo-desktop-only {
        display: none;
    }
}

.mo-list-search {
    max-width: 320px;
}

.mo-list-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.mo-list-card {
    background: var(--mo-card);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .mo-list-card:hover {
        box-shadow: var(--mo-shadow);
        transform: translateY(-1px);
    }

.mo-list-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mo-list-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--mo-text);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-list-card-body {
    font-size: 12.5px;
    color: var(--mo-text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .mo-list-card-body b {
        color: var(--mo-text);
        font-weight: 600;
    }

.mo-list-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--mo-border);
}

.mo-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 12px;
    color: var(--mo-text-muted);
    font-weight: 600;
}

    .mo-list-empty .fa {
        font-size: 30px;
        color: #C3CAD8;
    }

.mo-list-pager.k-pager-wrap {
    background: transparent;
    border: none;
    padding: 14px 0 0;
    justify-content: center;
}

/* ---------- Responsive / mobile ---------- */

.mo-mobile-toggle {
    display: none;
    border: none;
    background: transparent;
    font-size: 20px;
    color: var(--mo-text);
    padding: 6px 10px;
    flex: none;
}

@media (max-width: 991px) {
    .mo-header-inner {
        padding: 0 14px;
        gap: 10px;
    }

    .mo-header-brand {
        gap: 10px;
    }

    .mo-logo span {
        display: none;
    }

    .mo-mobile-toggle {
        display: inline-flex;
        align-items: center;
    }

    /* Horizontalni meni se na mobitelu ne prikazuje - hamburger otvara
       full-screen #moMobileMenu (vidi .mo-mm ispod). */
    .mo-nav {
        display: none !important;
    }

    .mo-actions {
        gap: 0;
    }

    .mo-profile-name, .mo-profile-email {
        display: none;
    }

    .mo-profile img {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 767px) {
    .wrapper {
        padding: 0 12px;
    }

    #content-wrap {
        padding-top: 12px;
    }

    .mo-stat-row {
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .ibox-content, .ibox-title {
        padding: 16px;
    }

    /* Page-heading action buttons become a fixed bottom action bar on
       mobile instead of sitting inline next to the title - full width,
       stacked, always reachable while scrolling. #page-wrapper gets extra
       bottom padding reserved below so the bar never covers the last bit
       of page content; the bar itself scrolls internally past that if a
       page has more buttons than fit (e.g. Stranke's 4). */
    html body #page-wrapper {
        padding-bottom: 60px !important;
    }

        /* rezervisani prostor samo gdje donja traka stvarno postoji (visina trake
           ovisi o broju dugmadi, a na list stranicama ostaje samo jedno) */
        html body #page-wrapper:has(.page-heading .title-action > *) {
            padding-bottom: 140px !important;
        }

        html body #page-wrapper:has(.page-heading .mo-list-page-actions) {
            padding-bottom: 110px !important;
        }

    /* Jedan zajednički bočni rub (12px, = .wrapper padding) za naslov, sekcije
       i donju traku. Bootstrap row/col parovi su davali 12, 17 ili 27px zavisno
       od stranice, pa se ništa nije poklapalo s dugmetom u donjoj traci. */
    .page-heading.row,
    .wrapper-content > .row {
        margin-left: 0;
        margin-right: 0;
    }

        .page-heading.row > [class*="col-"],
        .wrapper-content > .row > [class*="col-"] {
            padding-left: 0;
            padding-right: 0;
        }

    /* !important na svim stranama jer Inspinia .title-action ima padding-top:30px */
    .page-heading .title-action {
        text-align: initial !important;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        display: flex;
        /* red, ne kolona: "Povratak" + ikonica-dugme stanu jedno do drugog
           umjesto dva reda preko cijele širine; dugo dugme se samo prelomi */
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        max-height: 60vh;
        overflow-y: auto;
        background: var(--mo-card);
        border-top: 1px solid var(--mo-border);
        box-shadow: 0 -6px 20px rgba(20, 30, 60, 0.1);
    }

        .page-heading .title-action > .btn,
        .page-heading .title-action > a.btn,
        .page-heading .title-action > button,
        .page-heading .title-action > .btn-group {
            flex: 1 1 auto;
            width: auto;
            min-height: 44px;
            margin: 0 !important;
        }

        .page-heading .title-action .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .page-heading .title-action .btn-group .dropdown-toggle {
            width: 100%;
        }

        .page-heading .title-action .btn-group .dropdown-menu {
            top: auto;
            bottom: 100%;
            margin-bottom: 6px;
        }

    /* On the 6 grid/list Index pages, the mobile bottom bar should only
       surface the one primary action (Novi pacijent, Novi račun, Nova
       ponuda...) - secondary buttons (Postavke, Izvještaji, QR Code,
       Import) just clutter a small screen. Scoped to .mo-list-page-actions
       specifically (not all .title-action) so this doesn't hide things like
       the "Povratak" back button on Details/Edit pages elsewhere. */
    .mo-list-page-actions > *:not(.btn-primary) {
        display: none !important;
    }

    /* Form footer action rows (Spremi/Izmjena/Odustani/Brisanje) on
       Create/Edit pages used Bootstrap's pull-right, which on a narrow
       screen leaves a tiny floated button next to left-aligned links -
       cramped and easy to mistap. Stack everything full width instead.
       Works whether the row's direct children are the buttons themselves
       or Bootstrap columns wrapping them (col-sm-4 etc. have no explicit
       width below 768px anyway, so flex stretch fills them to 100%).
       Small utility buttons (.btn-sm, e.g. Ponude's template save/edit/
       delete icons) are left at their natural size and just wrap onto
       their own line instead of stretching. */
    .mo-form-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .mo-form-actions > * {
            width: 100%;
            margin: 0 !important;
            float: none !important;
        }

        .mo-form-actions > :empty {
            display: none;
        }

        .mo-form-actions .btn:not(.btn-sm) {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            float: none !important;
        }

        .mo-form-actions .btn.btn-sm {
            float: none !important;
        }

    .table-responsive {
        border: none;
    }

    /* Kendo prozori/dijalozi imaju fiksne (.Width(600/900)) ili postotne (66%)
       širine - na telefonu ili izlaze van ekrana ili su preuski. Svi idu
       na punu širinu minus mali rub; center() i dalje računa vertikalu. */
    .k-window {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        left: 8px !important;
        max-height: calc(100vh - 16px);
    }

        .k-window > .k-window-content {
            overflow: auto;
        }

    /* Kendo grids don't reflow on their own - let them scroll horizontally
       instead of squashing/breaking their columns. */
    .k-grid {
        overflow-x: auto;
    }

    /* Plain jQuery DataTables (e.g. the editable line-items table on
       Ponude Create/Edit) have fixed pixel-width columns that don't
       reflow either - DataTables always wraps its <table> in
       .dataTables_wrapper, so scope the scroll there instead of the
       table itself (display:block on a <table> breaks its layout). */
    .dataTables_wrapper {
        overflow-x: auto;
    }

    /* Bootstrap's .input-group uses display:table, whose cells refuse to
       shrink below their content's natural width - a select2/dropdown
       with a long option label can force the whole input-group wider
       than the screen, causing horizontal page scroll. */
    .input-group {
        max-width: 100%;
    }

        .input-group .form-control,
        .input-group .select2-container {
            min-width: 0;
        }
}

/* ---------- Mobilni redizajn: tabela -> kartice ----------
   <table class="mo-table-cards">: ispod 768px svaki <tr> postaje kartica,
   <td data-label="X"> red "X ....... vrijednost". Posebne ćelije:
   .mo-td-title (naslov kartice), .mo-td-wide (labela iznad, sadržaj ispod),
   .mo-td-action (dugme preko cijele širine na dnu), .mo-td-empty /
   .mo-td-empty-hide (sakrij ako nema sadržaja). Desktop ostaje tabela. */
@media (max-width: 767px) {
    table.mo-table-cards,
    table.mo-table-cards > tbody {
        display: block;
        width: 100%;
    }

        table.mo-table-cards > thead {
            display: none;
        }

        table.mo-table-cards > tbody > tr {
            display: block;
            background: var(--mo-card);
            border: 1px solid var(--mo-border);
            border-radius: var(--mo-radius-md);
            padding: 12px 14px;
            margin-bottom: 10px;
        }

            table.mo-table-cards > tbody > tr:hover {
                background: var(--mo-card);
            }

            table.mo-table-cards > tbody > tr > td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 12px;
                border: none !important;
                padding: 4px 0 !important;
                text-align: right;
                width: auto !important;
                min-width: 0;
                word-break: break-word;
            }

                table.mo-table-cards > tbody > tr > td[data-label]::before {
                    content: attr(data-label);
                    flex: none;
                    font-size: 12px;
                    font-weight: 600;
                    color: var(--mo-text-muted);
                    text-align: left;
                }

                table.mo-table-cards > tbody > tr > td.mo-td-title {
                    display: block;
                    text-align: left;
                    font-size: 15px;
                    padding-bottom: 8px !important;
                    margin-bottom: 4px;
                    border-bottom: 1px solid var(--mo-border) !important;
                }

                table.mo-table-cards > tbody > tr > td.mo-td-wide {
                    display: block;
                    text-align: left;
                }

                    table.mo-table-cards > tbody > tr > td.mo-td-wide::before {
                        display: block;
                        margin-bottom: 2px;
                    }

                table.mo-table-cards > tbody > tr > td.mo-td-action {
                    display: block;
                    padding-top: 10px !important;
                }

                    table.mo-table-cards > tbody > tr > td.mo-td-action .btn {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 6px;
                        width: 100%;
                    }

                table.mo-table-cards > tbody > tr > td.mo-td-empty,
                table.mo-table-cards > tbody > tr > td.mo-td-empty-hide:not(:has(li)) {
                    display: none;
                }

                table.mo-table-cards > tbody > tr > td .tag-list {
                    margin: 0;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                    gap: 4px;
                }

                    table.mo-table-cards > tbody > tr > td .tag-list li {
                        float: none;
                    }

                /* red ikonica-dugmadi (pregled/uredi/obriši...) - veći tap target */
                table.mo-table-cards > tbody > tr > td.mo-td-btns {
                    justify-content: flex-end;
                    flex-wrap: wrap;
                    gap: 6px;
                    padding-top: 10px !important;
                    margin-top: 4px;
                    border-top: 1px solid var(--mo-border) !important;
                }

                    table.mo-table-cards > tbody > tr > td.mo-td-btns .btn {
                        min-width: 42px;
                        height: 38px;
                        margin: 0 !important;
                    }

                table.mo-table-cards > tbody > tr > td[colspan] {
                    display: block;
                    text-align: center;
                }

    .table-responsive:has(> table.mo-table-cards) {
        overflow: visible;
    }

    /* DataTables stavke (.mo-dt-cards): bez odvojenog zaglavlja i bez scrollY
       kutije od 160px - kartice se samo nižu. Odabrani red (za "Obriši")
       dobija plavi okvir. Rb kolona = mali broj u uglu. */
    .dataTables_wrapper:has(table.mo-dt-cards) {
        overflow: visible;
    }

        .dataTables_wrapper:has(table.mo-dt-cards) .dataTables_scrollHead,
        .dataTables_wrapper:has(table.mo-dt-cards) .dataTables_scrollFoot {
            display: none;
        }

        .dataTables_wrapper:has(table.mo-dt-cards) .dataTables_scrollBody {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            border: none !important;
        }

    table.mo-dt-cards {
        width: 100% !important;
        border: none !important;
    }

        table.mo-dt-cards > tbody > tr.selected {
            border-color: var(--mo-primary);
            box-shadow: 0 0 0 2px var(--mo-primary-light);
        }

        table.mo-dt-cards > tbody > tr > td:first-child[data-label],
        table.mo-dt-cards > tbody > tr > td[data-label]:empty {
            display: none;
        }

        table.mo-dt-cards > tbody > tr > td:nth-child(2) {
            display: block;
            text-align: left;
            font-weight: 700;
            font-size: 14.5px;
            padding-bottom: 8px !important;
            margin-bottom: 4px;
            border-bottom: 1px solid var(--mo-border) !important;
        }

            table.mo-dt-cards > tbody > tr > td:nth-child(2)::before {
                display: none;
            }

        table.mo-dt-cards > tbody > tr > td.dataTables_empty {
            display: block;
            text-align: center;
            color: var(--mo-text-muted);
            font-weight: 400;
            border: none !important;
        }

    /* red Dodaj / Obriši stavku: jedno do drugog umjesto zalijepljeno jedno ispod drugog */
    .row:has(> [class*="col-"] > #dodajStavku) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        .row:has(> [class*="col-"] > #dodajStavku) > [class*="col-"] {
            flex: 1 1 calc(50% - 4px);
            margin: 0 !important;
        }

            .row:has(> [class*="col-"] > #dodajStavku) > [class*="col-"]:first-child {
                flex-basis: 100%;
            }

    .ibox-content .form-group {
        margin-bottom: 12px;
    }

    /* Bootstrap md/lg kolone se ispod 992px slažu jedna ispod druge bez ikakvog
       razmaka - labela sljedećeg polja se lijepi za prethodni select/input. */
    .ibox-content .row > [class*="col-md-"]:not(:last-child),
    .ibox-content .row > [class*="col-lg-"]:not(:last-child),
    .modal-body .row > [class*="col-md-"]:not(:last-child) {
        margin-bottom: 12px;
    }

    /* Obični .nav-tabs: Inspinia ih na malom ekranu slaže vertikalno (float:none
       na li) pa 4 taba pojedu pola ekrana. Umjesto toga jedan red koji se
       skrola prstom, aktivni tab podvučen. */
    .nav-tabs:not(.mo-pill-tabs) {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 1px solid var(--mo-border);
    }

        .nav-tabs:not(.mo-pill-tabs)::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs:not(.mo-pill-tabs) > li {
            float: none !important;
            flex: none;
            margin-bottom: -1px;
        }

            .nav-tabs:not(.mo-pill-tabs) > li > a {
                white-space: nowrap;
                padding: 10px 14px;
                margin: 0;
                border: none !important;
                border-bottom: 2px solid transparent !important;
                border-radius: 0;
                background: transparent !important;
                font-weight: 600;
                color: var(--mo-text-muted);
            }

            .nav-tabs:not(.mo-pill-tabs) > li.active > a {
                color: var(--mo-primary);
                border-bottom-color: var(--mo-primary) !important;
            }

    .tabs-container .panel-body {
        border: none;
        padding: 14px 0 0;
    }

    /* Forme: ugniježdeni row/col (col-sm/md/lg se ionako slažu jedan ispod
       drugog) davali su stepenasto uvlačenje polja 48/60/70px i inpute koji ne
       idu do desnog ruba - poravnaj sve na isti rub. col-xs-* (namjerno jedno
       do drugog) ostaju netaknuti. */
    .ibox-content .row:not(:has(> [class*="col-xs-"])) {
        margin-left: 0;
        margin-right: 0;
    }

        .ibox-content .row > [class*="col-"]:not([class*="col-xs-"]) {
            padding-left: 0;
            padding-right: 0;
        }

    /* form-horizontal: labela se na mobitelu slaže iznad polja - treba zrak
       između grupa (bilo 5px pa je labela sljedećeg polja lijepila za select) */
    .form-horizontal .form-group {
        margin-bottom: 14px;
    }

    .form-horizontal .control-label {
        text-align: left;
        padding-top: 0;
        margin-bottom: 5px;
    }

    .btn-group.full-width {
        display: flex;
    }

        .btn-group.full-width > .btn {
            flex: 1 1 0;
            float: none;
        }

    .footer {
        font-size: 11.5px;
        line-height: 1.5;
        white-space: normal;
        padding: 10px 12px;
    }

    /* Akcije na vrhu kartice (Karton, Detalji usluge): mreža 2 kolone umjesto
       neravnog prelamanja; neparno zadnje dugme ide preko cijele širine. */
    .mo-action-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

        .mo-action-grid > :last-child:nth-child(odd) {
            grid-column: span 2;
        }

        .mo-action-grid > .btn-group {
            display: flex;
            margin: 0 !important;
        }

            .mo-action-grid > .btn-group > .btn {
                flex: 1 1 auto;
            }

        .mo-action-grid > .btn {
            margin: 0 !important;
        }

    /* Kendo grid kolone bez .Width() se na uskom ekranu stisnu na 0px (fiksne
       kolone pojedu svu širinu) - npr. naziv stavke na Detaljima računa nestane.
       Minimalna širina tabele + horizontalni scroll (Kendo sinhronizuje header). */
    .k-grid .k-grid-header-wrap > table,
    .k-grid .k-grid-content > table,
    .k-grid .k-grid-footer-wrap > table,
    .k-grid > table {
        min-width: 820px;
    }

    .k-grid .k-grid-content {
        overflow-x: auto;
    }

        .mo-action-grid .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            white-space: normal;
            line-height: 1.25;
            padding: 10px 8px;
            min-height: 44px;
        }

    /* Kompaktni "labela - vrijednost" redovi umjesto labele iznad vrijednosti.
       Grid (ne float) da linije ostanu poravnate i kad vrijednost pređe u 2 reda. */
    .mo-dl-compact {
        display: grid;
        grid-template-columns: 40% 1fr;
        margin-bottom: 0;
    }

        .mo-dl-compact dt,
        .mo-dl-compact dd {
            float: none;
            width: auto;
            margin: 0;
            padding: 8px 0;
            border-bottom: 1px solid var(--mo-border);
            display: flex;
            align-items: center;
            min-width: 0;
        }

        .mo-dl-compact dt {
            font-size: 12px;
            text-transform: none;
            letter-spacing: 0;
            text-align: left;
        }

        .mo-dl-compact dd {
            justify-content: flex-end;
            text-align: right;
            word-break: break-word;
        }

            .mo-dl-compact dt:nth-last-of-type(1),
            .mo-dl-compact dd:last-child {
                border-bottom: none;
            }

    /* pill tabovi dijele širinu ravnomjerno umjesto da zadnji ispadne van ekrana */
    .mo-pill-tabs {
        width: 100%;
    }

        .mo-pill-tabs > li {
            flex: 1 1 0;
            min-width: 0;
        }

            .mo-pill-tabs > li > a {
                display: flex !important;
                align-items: center;
                justify-content: center;
                height: 100%;
                text-align: center;
                white-space: normal;
                line-height: 1.2 !important;
                font-size: 12.5px;
                padding: 8px 6px !important;
            }

    /* naslovi stranica manji da "Karton pacijenta" i sl. stanu u jedan red */
    .page-heading h2,
    .wrapper-content > .row > [class*="col-"] > h2 {
        font-size: 21px;
    }

}

/* ---------- Full-screen mobilni meni (_TopNavbar.cshtml #moMobileMenu) ----------
   Postoji u DOM-u uvijek, ali se prikazuje samo ispod 992px kad hamburger
   doda .mo-mm-open. Sadržaj (pločice/liste) puni JS iz #moNav i profil
   dropdowna. html.mo-mm-lock zaključava scroll stranice ispod. */
.mo-mm {
    display: none;
}

@media (max-width: 991px) {
    .mo-mm {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: var(--mo-bg);
        visibility: hidden;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    }

        .mo-mm.mo-mm-open {
            visibility: visible;
            opacity: 1;
            transform: none;
            transition: opacity .2s ease, transform .2s ease, visibility 0s;
        }

    html.mo-mm-lock, html.mo-mm-lock body {
        overflow: hidden !important;
    }
}

.mo-mm-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 14px 0 18px;
    background: var(--mo-card);
    border-bottom: 1px solid var(--mo-border);
    padding-top: env(safe-area-inset-top, 0px);
}

    .mo-mm-head .mo-logo span {
        display: inline;
    }

.mo-mm-close {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--mo-bg);
    color: var(--mo-text);
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mo-mm-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mo-mm-user {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--mo-card);
    border-radius: var(--mo-radius-lg);
    box-shadow: var(--mo-shadow-sm);
    color: var(--mo-text);
}

    .mo-mm-user:hover, .mo-mm-user:focus {
        text-decoration: none;
        color: var(--mo-text);
    }

    .mo-mm-user img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
    }

    .mo-mm-user > .fa {
        color: var(--mo-text-muted);
        font-size: 20px;
    }

.mo-mm-user-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mo-mm-user-name {
    font-weight: 700;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mo-mm-user-role {
    font-size: 13px;
    color: var(--mo-text-muted);
}

.mo-mm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
}

.mo-mm-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 92px;
    padding: 12px 6px;
    background: var(--mo-card);
    border: 1px solid var(--mo-border);
    border-radius: var(--mo-radius-md);
    color: var(--mo-text);
    font-weight: 600;
    font-size: 13px;
    text-align: center;
    transition: transform .1s ease, background .15s ease;
}

    .mo-mm-tile:hover, .mo-mm-tile:focus {
        text-decoration: none;
        color: var(--mo-primary);
    }

    .mo-mm-tile:active {
        transform: scale(.96);
        background: var(--mo-primary-light);
    }

.mo-mm-tile-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--mo-primary-light);
    color: var(--mo-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

    .mo-mm-tile-icon i:before {
        margin: 0;
        font-size: 20px;
    }

.mo-mm-tile.active {
    border-color: var(--mo-primary);
    background: var(--mo-primary-light);
    color: var(--mo-primary);
}

    .mo-mm-tile.active .mo-mm-tile-icon {
        background: var(--mo-primary);
        color: #fff;
    }

.mo-mm-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mo-text-muted);
    padding: 0 6px 8px;
}

.mo-mm-list {
    background: var(--mo-card);
    border-radius: var(--mo-radius-lg);
    box-shadow: var(--mo-shadow-sm);
    overflow: hidden;
}

.mo-mm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 16px;
    color: var(--mo-text);
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--mo-border);
}

    .mo-mm-row:last-child {
        border-bottom: none;
    }

    .mo-mm-row:hover, .mo-mm-row:focus {
        text-decoration: none;
        color: var(--mo-text);
    }

    .mo-mm-row:active {
        background: var(--mo-bg);
    }

    .mo-mm-row > .fa:first-child {
        width: 22px;
        text-align: center;
        color: var(--mo-primary);
        font-size: 16px;
    }

    .mo-mm-row sup {
        top: 0;
        font-size: 11px;
        font-weight: 700;
        background: var(--mo-danger);
        color: #fff !important;
        border-radius: var(--mo-radius-pill);
        padding: 2px 7px;
    }

.mo-mm-chev {
    margin-left: auto;
    color: #B5BCCB;
    font-size: 18px;
}

.mo-mm-row-danger, .mo-mm-row-danger:hover, .mo-mm-row-danger:focus {
    color: var(--mo-danger);
}

    .mo-mm-row-danger > .fa:first-child {
        color: var(--mo-danger);
    }

/* Fullscreen signature capture popup (Scripts/app/signature-pad.js), shared
   between Radnik/Edit (radnikov potpis) and the patient document-signing page. */
.mo-signature-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20000;
    background: #fff;
    flex-direction: column;
}

    .mo-signature-overlay.mo-open {
        display: flex;
    }

.mo-signature-header {
    flex: 0 0 auto;
    padding: 15px 20px;
    border-bottom: 1px solid var(--mo-border, #e5e9f2);
}

.mo-signature-title {
    font-size: 18px;
    font-weight: 600;
}

.mo-signature-canvas-wrap {
    flex: 1 1 auto;
    padding: 15px;
    min-height: 0;
}

.mo-signature-canvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    border: 2px dashed var(--mo-border, #ccd3e0);
    border-radius: var(--mo-radius, 8px);
    background: #fff;
    cursor: crosshair;
}

.mo-signature-actions {
    flex: 0 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--mo-border, #e5e9f2);
}

.mo-signature-hint {
    display: none;
}

@media (max-width: 767px), (max-height: 500px) {
    .mo-signature-header {
        padding: 10px 14px;
    }

    .mo-signature-title {
        font-size: 16px;
    }

    .mo-signature-hint {
        display: block;
        font-size: 13px;
        color: #6b7280;
        margin-top: 2px;
    }

    .mo-signature-canvas-wrap {
        padding: 10px;
    }

    .mo-signature-actions {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        gap: 8px;
    }

        .mo-signature-actions .btn {
            flex: 1 1 0;
            padding: 10px 6px;
        }
}

/* Savjet za okretanje samo kad je telefon uspravno */
@media (orientation: landscape) {
    .mo-signature-rotate {
        display: none;
    }
}

/* Drag&drop zona za dokumente (Karton tab Dokumenti + PacijentUpload) */
.mo-dz {
    border: 2px dashed var(--mo-border, #c3ccd6);
    border-radius: var(--mo-radius, 8px);
    padding: 18px 14px;
    text-align: center;
    color: #667;
    transition: border-color .15s, background .15s;
}

    .mo-dz.mo-dz-over {
        border-color: var(--mo-primary, #2F6FED);
        background: var(--mo-primary-light, #eef4ff);
    }

    .mo-dz > .fa-cloud-upload {
        font-size: 30px;
        color: #9aa7b4;
        display: block;
        margin-bottom: 6px;
    }

    /* Veća varijanta (Karton "Dodaj dokument"): cijeli prozor prima datoteke, zona se istakne dok se vuče preko njega */
    .mo-dz.mo-dz-veliki { padding: 28px 16px 22px; border-radius: var(--mo-radius-md, 12px); background: #F7F9FC; transition: border-color .15s, background .15s, transform .15s; }
    .mo-dz-veliki .mo-dz-ikona { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--mo-primary-light, #eef4ff); color: var(--mo-primary, #2F6FED); font-size: 24px; margin-bottom: 10px; transition: transform .15s; }
    .mo-dz-veliki .mo-dz-naslov { font-size: 15px; font-weight: 700; color: var(--mo-text, #1f2937); }
    .mo-dz-veliki .mo-dz-pod { font-size: 12px; color: var(--mo-text-muted, #6b7280); margin: 4px 0 12px; }
    .mo-dz-veliki .mo-dz-btn { margin: 0; cursor: pointer; }
    .mo-dz-over .mo-dz.mo-dz-veliki, .mo-dz.mo-dz-veliki.mo-dz-over { border-color: var(--mo-primary, #2F6FED); background: var(--mo-primary-light, #eef4ff); transform: scale(1.01); }
    .mo-dz-over .mo-dz-veliki .mo-dz-ikona { transform: translateY(-3px); }
    .modal-content.mo-dz-over { box-shadow: 0 0 0 3px var(--mo-primary-light, #eef4ff), 0 12px 40px rgba(15, 23, 42, .25); }

.mo-dz-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.mo-dz-lista:empty { display: none; }
.mo-dz-lista li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--mo-radius-sm, 6px); background: #F7F9FC; font-size: 12.5px; }
.mo-dz-lista li .fa { width: 14px; text-align: center; color: var(--mo-text-muted, #6b7280); }
.mo-dz-lista li.salje .fa { color: var(--mo-primary, #2F6FED); }
.mo-dz-lista li.ok .fa { color: var(--mo-success, #17A673); }
.mo-dz-lista li.greska { background: var(--mo-danger-bg, #FCE9E7); }
.mo-dz-lista li.greska .fa { color: var(--mo-danger, #E3564B); }
.mo-dz-lista .mo-dz-ime { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mo-text, #1f2937); }
.mo-dz-lista small { color: var(--mo-text-muted, #6b7280); flex: none; }

/* Sakriveni file input iza labela/dugmeta (attribute [hidden] gube neki reset/plugin CSS-ovi) */
.mo-file-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    pointer-events: none !important;
}

/* Vrsta plaćanja u gridu Računi (templateNacinPlacanja) - pilula s ikonom, opis u title-u.
   Iste ikone/boje kao popup za odabir načina plaćanja (Racuni/Modal_OdabirNacinaPlacanja). */
.mo-np-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px 3px 8px;
    border-radius: var(--mo-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    background: #EEF1F6;
    color: #6B7488;
}
.mo-np-pill .fa { font-size: 13px; }
.mo-np-pill.green  { background: var(--mo-success-bg); color: var(--mo-success); }
.mo-np-pill.purple { background: var(--mo-purple-bg); color: var(--mo-purple); }
.mo-np-pill.blue   { background: var(--mo-primary-light); color: var(--mo-primary); }
.mo-np-pill.orange { background: var(--mo-warning-bg); color: var(--mo-warning); }
.mo-np-pill.teal   { background: var(--mo-teal-bg); color: #178C8C; }

/* ==========================================================================
   Računi Create/Edit (.mo-rn) - kartice lijevo, sticky sažetak desno,
   poslovni/naplatni + valuta skriveni u "Napredno".
   ========================================================================== */
.mo-rn .mo-rn-kartica { margin-bottom: 14px; }
.mo-rn .mo-rn-kartica > .ibox-content { border-radius: var(--mo-radius-lg); padding: 18px 20px; }
.mo-rn-naslov { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mo-rn-naslov h3 { margin: 0; font-size: 15px; font-weight: 700; }
.mo-rn-naslov .mo-rn-ikona { width: 28px; height: 28px; border-radius: 50%; background: var(--mo-primary-light); color: var(--mo-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; }
.mo-rn-naslov .mo-rn-naslov-desno { margin-left: auto; }
.mo-rn .control-label, .mo-rn label { font-size: 12px; font-weight: 600; color: var(--mo-text-muted); margin-bottom: 4px; }
.mo-rn .mo-rn-polja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.mo-rn .mo-rn-polja > .mo-rn-sirina { grid-column: 1 / -1; }
.mo-rn .mo-rn-stavka-unos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.mo-rn .mo-rn-stavka-opis { display: flex; gap: 8px; margin-top: 12px; }
.mo-rn .mo-rn-stavka-opis input { flex: 1 1 auto; min-width: 0; }
.mo-rn .mo-rn-stavka-opis .btn { flex: none; margin: 0; }
.mo-rn .mo-rn-tablica { margin-top: 14px; }
.mo-rn .mo-rn-datum { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }
.mo-rn .mo-rn-datum.mo-rn-datum-jednako { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mo-rn .mo-rn-placeno { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 26px; font-size: 13px; color: var(--mo-text); cursor: pointer; }
.mo-rn .mo-rn-placeno input { margin: 0; }
.mo-rn .mo-rn-opcije { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.mo-rn .mo-rn-opcije .mo-rn-placeno { padding-top: 0; }
.mo-rn .mo-rn-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }

.mo-rn-bocno > .ibox-content { border-radius: var(--mo-radius-lg); padding: 18px 20px; }
.mo-rn-broj { padding: 12px 14px; background: #F7F9FC; border-radius: var(--mo-radius-md); margin-bottom: 14px; }
.mo-rn-broj small { display: block; font-size: 11.5px; color: var(--mo-text-muted); }
.mo-rn-broj strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: .2px; color: var(--mo-text); word-break: break-all; }
.mo-rn-broj .mo-rn-broj-info { font-size: 11px; color: var(--mo-text-muted); margin-top: 2px; }
.mo-rn-iznosi { display: grid; gap: 6px; font-size: 13px; }
.mo-rn-iznos { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mo-rn-iznos > span:first-child { color: var(--mo-text-muted); }
.mo-rn-iznos .mo-rn-vrijednost { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.mo-rn-iznos .mo-rn-vrijednost input { border: 0; background: transparent !important; box-shadow: none; padding: 0; height: auto; width: 110px; text-align: right; font-weight: 600; color: var(--mo-text); cursor: default; }
.mo-rn-iznos .mo-rn-vrijednost .input-group-addon, .mo-rn-iznos .mo-rn-vrijednost .mo-rn-valuta { border: 0; background: transparent; padding: 0; font-size: 12px; color: var(--mo-text-muted); width: auto; }
.mo-rn-popust .input-group { width: 150px; }
.mo-rn-raspis textarea { border: 0; background: #F7F9FC !important; border-radius: var(--mo-radius-sm); font-size: 11.5px; color: var(--mo-text-muted); resize: none; padding: 6px 8px; }
.mo-rn-ukupno { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--mo-border); }
.mo-rn-ukupno > span:first-child { color: var(--mo-text); font-weight: 700; }
.mo-rn-ukupno .mo-rn-vrijednost input { font-size: 20px; font-weight: 800; color: var(--mo-primary) !important; width: 140px; }
.mo-rn-akcije { display: grid; gap: 8px; margin-top: 16px; }
.mo-rn-akcije .btn { margin: 0; }

.mo-rn-napredno-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); background: var(--mo-card); color: var(--mo-text); font-size: 13px; font-weight: 600; text-align: left; }
.mo-rn-napredno-toggle:hover { border-color: #C9D6F5; }
.mo-rn-napredno-toggle .mo-rn-napredno-sazetak { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--mo-text-muted); }
.mo-rn-napredno-toggle .fa-chevron-down { font-size: 11px; color: var(--mo-text-muted); transition: transform .2s; }
.mo-rn-napredno-toggle[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
.mo-rn-napredno { display: none; margin-top: 10px; padding: 12px; background: #F7F9FC; border-radius: var(--mo-radius-md); }
.mo-rn-napredno.otvoreno { display: grid; gap: 10px; }
.mo-rn-napredno .mo-rn-napredno-red { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mo-rn-napredno .mo-rn-napredno-naslov { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--mo-text-muted); }

@media (min-width: 1200px) { .mo-rn-bocno { position: sticky; top: 76px; } }
@media (max-width: 767px) {
    .mo-rn .mo-rn-stavka-unos { gap: 8px; }
    .mo-rn .mo-rn-polja > * { grid-column: 1 / -1; }
    .mo-rn .mo-rn-placeno { padding-top: 0; }
    .mo-rn .mo-rn-tri { grid-template-columns: minmax(0, 1fr); }
    .mo-rn .mo-rn-kartica > .ibox-content, .mo-rn-bocno > .ibox-content { padding: 14px; }
}
/* Stavke/Edit (.mo-st-edit) - isti raspored kao računi: kartice lijevo, sažetak cijene desno */
.mo-st-edit .mo-st-edit-upozorenje { border-radius: var(--mo-radius-md); margin-bottom: 14px; }
.mo-st-edit textarea.form-control { resize: vertical; min-height: 74px; }
.mo-st-edit .input-group .k-dropdown, .mo-st-edit .input-group .k-numerictextbox { width: 100%; }
.mo-st-edit .input-group-btn .btn { height: 34px; }
.mo-st-edit-napomena { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-bottom: 12px; background: #F7F9FC; border-radius: var(--mo-radius-md); font-size: 12.5px; color: var(--mo-text-muted); }
.mo-st-edit-napomena .fa { color: var(--mo-primary); margin-top: 2px; }
.mo-st-edit-napomena b { color: var(--mo-text); }
.mo-st-edit #CjenikStavkePoslovniceGrid { border-radius: var(--mo-radius-md); }
.mo-st-edit-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 14px; margin-bottom: 12px; border-bottom: 1px solid var(--mo-border); }
.mo-st-edit-status-naslov { display: block; font-weight: 700; font-size: 13px; color: var(--mo-text); }
.mo-st-edit-status small { display: block; font-size: 11.5px; color: var(--mo-text-muted); line-height: 1.3; }
.mo-st-edit-status .k-switch { flex: none; }
.mo-st-edit .mo-rn-iznos .mo-rn-vrijednost b { font-weight: 600; color: var(--mo-text); }
.mo-st-edit .mo-rn-iznos .mo-rn-vrijednost b.mo-st-edit-ukupno { font-size: 20px; font-weight: 800; color: var(--mo-primary); }
.mo-st-edit .mo-st-edit-obrisi { font-weight: 600; }
.mo-st-edit .mo-st-edit-obrisi:hover { text-decoration: none; background: var(--mo-danger-bg); }

/* Početna: "Današnji raspored" (.mo-dr) - vremenska lista termina, traka u boji doktora */
.mo-dr { display: grid; gap: 10px; }
.mo-dr-sazetak { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.mo-dr-sazetak > div { padding: 10px 12px; background: #F7F9FC; border-radius: var(--mo-radius-md); }
.mo-dr-sazetak b { display: block; font-size: 18px; font-weight: 800; color: var(--mo-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mo-dr-sazetak span { font-size: 11.5px; color: var(--mo-text-muted); }
.mo-dr-termin { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px 12px 18px; background: var(--mo-card); border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); transition: border-color .15s, box-shadow .15s; }
.mo-dr-termin::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--mo-dr-boja, var(--mo-primary)); }
.mo-dr-termin:hover { border-color: #C9D6F5; box-shadow: var(--mo-shadow); }
.mo-dr-termin.sljedeci { border-color: var(--mo-primary); box-shadow: 0 0 0 3px var(--mo-primary-light); }
.mo-dr-termin.traje { border-color: var(--mo-success); box-shadow: 0 0 0 3px var(--mo-success-bg); }
.mo-dr-termin.prosao { opacity: .6; }
.mo-dr-termin.prosao:hover { opacity: 1; }
.mo-dr-vrijeme { display: flex; flex-direction: column; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mo-dr-vrijeme b { font-size: 17px; font-weight: 800; color: var(--mo-text); }
.mo-dr-vrijeme span { font-size: 12px; color: var(--mo-text-muted); }
.mo-dr-vrijeme small { font-size: 10.5px; color: var(--mo-text-muted); margin-top: 2px; }
.mo-dr-naslov { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mo-dr-pacijent { font-size: 14.5px; font-weight: 700; color: var(--mo-text); }
a.mo-dr-pacijent:hover { color: var(--mo-primary); text-decoration: none; }
.mo-dr-oznaka { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--mo-radius-pill); font-size: 11px; font-weight: 700; }
.mo-dr-oznaka.traje { background: var(--mo-success-bg); color: var(--mo-success); }
.mo-dr-oznaka.sljedeci { background: var(--mo-primary-light); color: var(--mo-primary); }
.mo-dr-oznaka.hitno { background: var(--mo-danger-bg); color: var(--mo-danger); }
/* Početna: kartica "Danas" (Helpers/DnevniPregled) */
.mo-home-danas .ibox-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mo-danas-datum { font-size: 12px; color: var(--mo-text-muted); text-transform: capitalize; }
.mo-home-danas .ibox-content { display: grid; gap: 4px; padding-top: 10px; }
.mo-danas-red { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: var(--mo-radius-md); color: var(--mo-text); text-decoration: none; }
a.mo-danas-red:hover { background: #F7F9FC; color: var(--mo-text); text-decoration: none; }
.mo-danas-ikona { width: 34px; height: 34px; border-radius: 10px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.mo-danas-ikona.blue { background: var(--mo-primary-light); color: var(--mo-primary); }
.mo-danas-ikona.green { background: var(--mo-success-bg); color: var(--mo-success); }
.mo-danas-ikona.orange { background: var(--mo-warning-bg); color: var(--mo-warning); }
.mo-danas-ikona.purple { background: var(--mo-purple-bg, #F1ECFF); color: var(--mo-purple, #7C5CFC); }
.mo-danas-tekst { min-width: 0; flex: 1 1 auto; line-height: 1.3; }
.mo-danas-tekst b { display: block; font-size: 13.5px; font-weight: 700; }
.mo-danas-tekst small { display: block; font-size: 11.5px; color: var(--mo-text-muted); }
.mo-danas-znak { flex: none; padding: 2px 8px; border-radius: var(--mo-radius-pill); font-size: 11px; font-weight: 700; }
.mo-danas-znak.crveno { background: var(--mo-danger-bg); color: var(--mo-danger); }
@media (max-width: 767px) { .mo-home-danas { order: 2; } }

/* Potvrda termina SMS-om (Helpers/TerminPotvrdaServis) */
.mo-dr-oznaka.potvrdjen { background: var(--mo-success-bg); color: var(--mo-success); }
.mo-dr-oznaka.otkazan { background: var(--mo-danger-bg); color: var(--mo-danger); }
.mo-dr-oznaka.ceka { background: #EEF0F4; color: var(--mo-text-muted); }
.mo-dr-oznaka.bez { background: transparent; color: var(--mo-text-muted); border: 1px dashed #D5DAE3; }

/* Kartica Danas: potvrde dolaska za naredni dan + popup (Views/Pocetna/_PotvrdeTermina) */
.mo-danas-red.mo-danas-potvrde { cursor: pointer; }
.mo-danas-traka { display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: #EEF0F4; margin: 5px 0 4px; }
.mo-danas-traka span { display: block; height: 100%; }
.mo-danas-traka .potvrdjen { background: var(--mo-success); }
.mo-danas-traka .ceka { background: #C3CAD6; }
.mo-danas-traka .otkazan { background: var(--mo-danger); }
.mo-pt-sazetak { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mo-pt-lista { display: flex; flex-direction: column; }
.mo-pt-red { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #EEF1F6; }
.mo-pt-red:first-child { border-top: 0; }
.mo-pt-vrijeme { flex: none; width: 46px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mo-text); }
.mo-pt-sadrzaj { flex: 1 1 auto; min-width: 0; }
.mo-pt-pacijent { font-weight: 700; color: var(--mo-text); }
.mo-pt-detalji { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--mo-text-muted); }
.mo-pt-detalji a { color: var(--mo-primary); }
.mo-pt-status { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mo-pt-status small { font-size: 10.5px; color: var(--mo-text-muted); }
.mo-pt-savjet { margin: 12px 0 0; font-size: 12px; color: var(--mo-text-muted); }
.mo-pt-slanje { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: var(--mo-radius-md); background: var(--mo-primary-light); }
.mo-pt-slanje > div { flex: 1; min-width: 0; }
.mo-pt-slanje strong { display: block; font-size: 13px; }
.mo-pt-slanje small { display: block; color: var(--mo-text-muted); font-size: 12px; }
.mo-pt-slanje .btn { flex: none; }
@media (max-width: 480px) { .mo-pt-slanje { flex-direction: column; align-items: stretch; } }
/* Popup "Saglasnosti čekaju potpis" (Pocetna/_SaglasnostiNaCekanju) - isti raspored kao potvrde dolaska */
.mo-sg-dokument { font-size: 12.5px; color: var(--mo-text); margin: 1px 0 2px; overflow-wrap: anywhere; }
.mo-sg-dokument .fa { color: var(--mo-text-muted); margin-right: 3px; }
.mo-sg-akcije { display: flex; gap: 4px; margin-top: 4px; }
.mo-sg-akcije .btn { margin: 0; }
.mo-dr-termin:has(.mo-dr-oznaka.otkazan) { opacity: .55; }
.mo-dr-termin:has(.mo-dr-oznaka.otkazan) .mo-dr-pacijent { text-decoration: line-through; }
.mo-dr-puls { width: 7px; height: 7px; border-radius: 50%; background: var(--mo-success); animation: mo-tocka-treptaj 1.4s ease-in-out infinite; }
.mo-dr-detalji { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; font-size: 12.5px; color: var(--mo-text-muted); }
.mo-dr-detalji a { color: inherit; }
.mo-dr-detalji a:hover { color: var(--mo-primary); text-decoration: none; }
.mo-dr-tocka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mo-dr-boja, var(--mo-primary)); margin-right: 2px; vertical-align: 1px; }
.mo-dr-opis { margin-top: 4px; font-size: 12.5px; color: var(--mo-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mo-dr-akcije { display: flex; gap: 6px; align-items: center; }
.mo-dr-akcije .btn { margin: 0; }
.mo-dr-obrisi:hover { color: var(--mo-danger); border-color: var(--mo-danger); }
.mo-dr-prazno { text-align: center; padding: 36px 16px; color: var(--mo-text-muted); }
.mo-dr-prazno > .fa { font-size: 34px; color: var(--mo-primary); opacity: .6; margin-bottom: 8px; }
.mo-dr-prazno h4 { margin: 0 0 4px; font-weight: 700; color: var(--mo-text); }
.mo-dr-prazno p { margin: 0 0 12px; font-size: 13px; }
@media (max-width: 767px) {
    .mo-dr-sazetak { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mo-dr-termin { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px 12px 10px 16px; }
    .mo-dr-akcije { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .mo-dr-puls { animation: none; } }

/* Cjenovnik (Stavke/Index): naziv najprodavanije usluge u mini kartici - jedan red, "..." */
.stat-mini-card > div:last-child { min-width: 0; }
.stat-mini-value.mo-cj-naziv { font-size: 16px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-mini-value small { font-size: 12px; font-weight: 600; color: var(--mo-text-muted); }

/* Stranke (pacijenti) Create/Edit (.mo-sk) - isti raspored, profil pacijenta u bočnoj kartici (dijeli .mo-rd-profil) */
.mo-sk .mo-sk-upozorenje { border-radius: var(--mo-radius-md); margin-bottom: 14px; }
.mo-sk .mo-sk-izbor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.mo-sk .mo-sk-izbor .k-radio-label, .mo-sk .mo-sk-viber .k-checkbox-label { font-size: 13px; font-weight: 500; color: var(--mo-text); margin: 0; }
.mo-sk #fizickaDiv, .mo-sk #pravnaDiv { margin-bottom: 0; }
.mo-sk .mo-sk-razmak { margin-top: 12px; }
.mo-sk .mo-sk-razmak .help-block { margin: 4px 0 0; font-size: 11.5px; }
.mo-sk .mo-sk-viber { margin-top: 8px; }
.mo-sk #googleView .row { margin-left: -8px; margin-right: -8px; }
.mo-sk #googleView [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.mo-sk .mo-sk-tabovi .nav-tabs { margin-bottom: 0; }
.mo-sk .mo-sk-tabovi .panel-body { padding: 16px 0 0; border: 0; }
.mo-sk .mo-sk-tab-akcije { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.mo-sk .mo-sk-saglasnost-slanje { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; align-items: end; }
.mo-sk .mo-sk-saglasnost-slanje .btn-group { display: flex; }
.mo-sk .mo-sk-saglasnost-slanje .btn-group .btn { flex: 1 1 auto; padding-left: 6px; padding-right: 6px; }
.mo-sk-info { display: grid; gap: 8px; font-size: 13px; padding-bottom: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--mo-border); }
.mo-sk-info > div { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.mo-sk-info > div > .fa { width: 16px; margin-top: 3px; text-align: center; color: var(--mo-primary); flex: none; }
.mo-sk-info > div > span { min-width: 0; overflow-wrap: anywhere; }
.mo-sk-profil-status { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--mo-border); }
.mo-sk-profil-status .k-checkbox-label { font-size: 13px; }
@media (max-width: 1199px) { .mo-sk .mo-sk-saglasnost-slanje { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .mo-sk .mo-sk-saglasnost-slanje { grid-template-columns: minmax(0, 1fr); } }

/* Stranke/Index: filter "Prikaži deaktivirane pacijente" */
.mo-sk-filter { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.mo-sk-filter-chk { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-pill); font-size: 12.5px; font-weight: 600; color: var(--mo-text); cursor: pointer; background: var(--mo-card); }
.mo-sk-filter-chk input { margin: 0; accent-color: var(--mo-primary); cursor: pointer; }
.mo-sk-filter-chk:has(input:checked) { border-color: var(--mo-primary); background: var(--mo-primary-light); color: var(--mo-primary); }

/* Provjera duplikata pacijenta po broju (Scripts/app/pacijent-duplikat.js) - sadržaj swal-a */
.sweet-alert .mo-dup { text-align: left; margin: 12px 0 6px; padding: 12px 14px; background: #F7F9FC; border-radius: 10px; font-size: 13px; color: #1f2937; line-height: 1.7; }
.sweet-alert .mo-dup .fa { width: 16px; text-align: center; color: #2F6FED; margin-right: 4px; }
.sweet-alert .mo-dup-naziv { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.sweet-alert .mo-dup-status { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.sweet-alert .mo-dup-status.aktivan { background: #E1F8EE; color: #17A673; }
.sweet-alert .mo-dup-status.neaktivan { background: #FCE9E7; color: #E3564B; }
.sweet-alert .mo-dup-ostali { font-size: 12px; color: #6b7280; text-align: left; }
.sweet-alert .mo-dup-pitanje { margin: 10px 0 0; font-size: 14px; }

/* Radnici Create/Edit (.mo-rd) - isti raspored kao računi, profil radnika u bočnoj kartici */
.mo-rd .mo-rd-upozorenje { border-radius: var(--mo-radius-md); margin-bottom: 14px; }
.mo-rd .mo-rn-kartica small.text-muted { display: block; margin-top: 4px; font-size: 11.5px; }
.mo-rd-profil { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 4px 0 16px; margin-bottom: 12px; border-bottom: 1px solid var(--mo-border); }
.mo-rd-foto { position: relative; width: 112px; height: 112px; margin: 0 0 6px; border-radius: 50%; overflow: hidden; cursor: pointer; background: #F7F9FC; box-shadow: 0 0 0 4px var(--mo-primary-light); }
.mo-rd-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-rd-foto-promjena { position: absolute; inset: auto 0 0 0; height: 34%; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .45); color: #fff; font-size: 14px; opacity: 0; transition: opacity .15s; }
.mo-rd-foto:hover .mo-rd-foto-promjena, .mo-rd-foto:focus .mo-rd-foto-promjena { opacity: 1; }
.mo-rd-inicijali { width: 96px; height: 96px; margin-bottom: 6px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mo-primary); color: #fff; font-size: 34px; font-weight: 800; letter-spacing: .5px; transition: background .2s; }
.mo-rd-ime { font-size: 17px; font-weight: 800; color: var(--mo-text); line-height: 1.2; word-break: break-word; }
.mo-rd-mjesto { font-size: 12.5px; color: var(--mo-text-muted); }
.mo-rd-potpis { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mo-border); display: grid; gap: 8px; justify-items: start; }
.mo-rd-potpis-naslov { font-size: 12px; font-weight: 600; color: var(--mo-text-muted); }
.mo-rd-potpis-naslov small { font-weight: 400; }
.mo-rd .potpis-box { width: 100%; height: 110px; border: 1px dashed var(--mo-border); border-radius: var(--mo-radius-md); display: flex; align-items: center; justify-content: center; background: #fff; }
.mo-rd .potpis-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mo-rd .potpis-box .potpis-prazno { color: var(--mo-text-muted); font-size: 13px; }
.mo-rd .mo-rd-boja { height: 34px; padding: 3px 6px; cursor: pointer; }
.mo-rd .k-colorpicker { width: 100%; }
.mo-rd-doktor { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); background: #F7F9FC; cursor: pointer; font-weight: 400; transition: border-color .15s, background .15s; }
.mo-rd-doktor:hover { border-color: #C9D6F5; }
.mo-rd-doktor input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--mo-primary); cursor: pointer; }
.mo-rd-doktor small { display: block; font-size: 11.5px; color: var(--mo-text-muted); line-height: 1.3; }
.mo-rd-doktor .fa { color: var(--mo-primary); margin-right: 2px; }
.mo-rd-doktor:has(input:checked) { border-color: var(--mo-primary); background: var(--mo-primary-light); }

.icon-badge.orange { background: var(--mo-warning-bg); color: var(--mo-warning); }

/* Karton: odontogram stalni / mliječni zubi (Views/Karton/ZubiOdrasli + ZubiDjeca, Helpers/Odontogram) */
.mo-odontogram .mo-odontogram-izbor { display: flex; justify-content: center; margin: 0 0 12px; border: 0; }
.mo-odontogram .tab-content > .tab-pane.active { display: flex; justify-content: center; align-items: center; }

/* Radnici/Index (.mo-rdi) - pretraga + filteri, kartice radnika u mreži */
.mo-rdi-alati { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.mo-rdi-pretraga { position: relative; flex: 1 1 280px; max-width: 460px; }
.mo-rdi-pretraga .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mo-text-muted); }
.mo-rdi-pretraga input { padding-left: 34px; background: var(--mo-card); }
.mo-rdi-filteri { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-rdi-filter { border: 1px solid var(--mo-border); background: var(--mo-card); color: var(--mo-text); border-radius: var(--mo-radius-pill); padding: 6px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; }
.mo-rdi-filter span { margin-left: 4px; font-weight: 700; color: var(--mo-text-muted); }
.mo-rdi-filter:hover { border-color: #C9D6F5; }
.mo-rdi-filter.aktivan { background: var(--mo-primary); border-color: var(--mo-primary); color: #fff; }
.mo-rdi-filter.aktivan span { color: rgba(255, 255, 255, .8); }
.mo-rdi-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.mo-rdi-kartica { position: relative; display: flex; flex-direction: column; background: var(--mo-card); border: 1px solid var(--mo-border); border-radius: var(--mo-radius-lg); padding: 18px 18px 14px; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mo-rdi-kartica::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--mo-rdi-boja, var(--mo-primary)); }
.mo-rdi-kartica:hover { border-color: #C9D6F5; box-shadow: var(--mo-shadow); transform: translateY(-1px); }
.mo-rdi-kartica.neaktivan { opacity: .65; }
.mo-rdi-kartica.neaktivan:hover { opacity: 1; }
.mo-rdi-link { position: absolute; inset: 0; z-index: 1; }
.mo-rdi-iznad { position: relative; z-index: 2; }
.mo-rdi-vrh { display: flex; gap: 14px; align-items: flex-start; }
.mo-rdi-foto { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; background: #F7F9FC; box-shadow: 0 0 0 3px var(--mo-card), 0 0 0 5px var(--mo-rdi-boja, var(--mo-primary)); }
.mo-rdi-ime-blok { min-width: 0; flex: 1 1 auto; }
.mo-rdi-ime { font-size: 15.5px; font-weight: 800; color: var(--mo-text); line-height: 1.25; word-break: break-word; }
.mo-rdi-mjesto { font-size: 12.5px; color: var(--mo-text-muted); margin-top: 2px; }
.mo-rdi-oznake { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mo-rdi-oznaka { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--mo-radius-pill); font-size: 11px; font-weight: 700; }
.mo-rdi-oznaka.doktor { background: var(--mo-primary-light); color: var(--mo-primary); }
.mo-rdi-oznaka.upozorenje { background: var(--mo-warning-bg); color: var(--mo-warning); }
.mo-rdi-oznaka.opasnost { background: var(--mo-danger-bg); color: var(--mo-danger); }
.mo-rdi-oznaka.neaktivan { background: #EEF0F4; color: var(--mo-text-muted); }
.mo-rdi-podaci { display: grid; gap: 5px; margin-top: 14px; font-size: 12.5px; color: var(--mo-text); }
.mo-rdi-podaci > div { display: flex; gap: 8px; align-items: center; min-width: 0; }
.mo-rdi-podaci .fa { width: 14px; text-align: center; color: var(--mo-text-muted); flex: none; }
.mo-rdi-podaci span, .mo-rdi-podaci a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.mo-rdi-podaci a:hover { color: var(--mo-primary); text-decoration: none; }
.mo-rdi-dno { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--mo-border); font-size: 12px; color: var(--mo-text-muted); }
.mo-rdi-podaci { margin-bottom: 14px; }
.mo-rdi-usluge b { color: var(--mo-text); font-size: 14px; margin-right: 2px; }
.mo-rdi-otvori { font-weight: 700; color: var(--mo-primary); }
.mo-rdi-prazno { text-align: center; padding: 40px 16px; color: var(--mo-text-muted); }
.mo-rdi-prazno .fa { font-size: 34px; color: var(--mo-primary); opacity: .6; }
.mo-rdi-prazno h4 { margin: 8px 0 0; font-weight: 700; color: var(--mo-text); }
.mo-rdi-neaktivni { margin-top: 22px; }
.mo-rdi-neaktivni-naslov { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 14px; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-pill); background: var(--mo-card); font-size: 13px; font-weight: 700; color: var(--mo-text); }
.mo-rdi-neaktivni-naslov span { color: var(--mo-text-muted); }
.mo-rdi-neaktivni-naslov .fa-chevron-down { font-size: 11px; color: var(--mo-text-muted); transition: transform .2s; }
.mo-rdi-neaktivni-naslov[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
@media (max-width: 767px) {
    .mo-rdi-pretraga { max-width: none; }
    .mo-rdi-filteri { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
    .mo-rdi-filter { white-space: nowrap; }
    .mo-rdi-mreza { grid-template-columns: minmax(0, 1fr); }
}

/* Popup "Ovlasti" na Radnici/Edit (.mo-ov) - lista prekidača */
.mo-ov .modal-header small { display: block; margin-top: 2px; }
.mo-ov-pretraga { position: relative; margin-bottom: 10px; }
.mo-ov-pretraga .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mo-text-muted); }
.mo-ov-pretraga input { padding-left: 34px; }
.mo-ov-admin-info { padding: 8px 12px; margin-bottom: 10px; border-radius: var(--mo-radius-md); background: var(--mo-primary-light); color: var(--mo-primary); font-size: 12.5px; }
.mo-ov-lista { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; padding-right: 2px; }
.mo-ov-ucitavanje { padding: 20px; text-align: center; color: var(--mo-text-muted); }
.mo-ov-red { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); background: var(--mo-card); font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s; }
.mo-ov-red:hover { border-color: #C9D6F5; }
.mo-ov-red input { position: absolute; opacity: 0; pointer-events: none; }
.mo-ov-naziv { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: var(--mo-text); }
.mo-ov-red.admin .mo-ov-naziv { font-weight: 700; }
.mo-ov-prekidac { position: relative; width: 38px; height: 22px; flex: none; border-radius: 11px; background: #D5DBE6; transition: background .15s; }
.mo-ov-prekidac::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .15s; }
.mo-ov-red input:checked ~ .mo-ov-prekidac { background: var(--mo-primary); }
.mo-ov-red input:checked ~ .mo-ov-prekidac::after { transform: translateX(16px); }
.mo-ov-red input:focus-visible ~ .mo-ov-prekidac { box-shadow: 0 0 0 3px var(--mo-primary-light); }
.mo-ov-red:has(input:checked) { border-color: #C9D6F5; background: #F7F9FC; }
.mo-ov-red.zakljucano { opacity: .5; cursor: not-allowed; }
.mo-ov .modal-footer { display: flex; align-items: center; justify-content: space-between; }
.mo-ov-brojac { font-size: 12.5px; color: var(--mo-text-muted); }

/* Pacijent (lijevo: pacijent + vrsta posla, desno: podaci pacijenta) - Views/Shared/_PacijentInfoDokument */
.mo-rn .mo-rn-pacijent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mo-rn .mo-rn-pacijent-izbor { display: grid; gap: 12px; }
.mo-rn-pinfo { padding: 12px 14px; background: #F7F9FC; border-radius: var(--mo-radius-md); display: grid; gap: 8px; font-size: 13px; min-height: 100%; }
.mo-rn-pinfo > div { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.mo-rn-pinfo > div > .fa { width: 16px; margin-top: 3px; color: var(--mo-primary); flex: none; text-align: center; }
.mo-rn-pinfo > div > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-rn-pinfo small { display: block; font-size: 11px; color: var(--mo-text-muted); line-height: 1.2; }
.mo-rn-pinfo a { color: inherit; font-weight: 600; }
.mo-rn-pinfo .mo-rn-pinfo-prazno { color: var(--mo-text-muted); align-items: center; }
.mo-rn-pinfo .mo-rn-pinfo-prazno .fa { margin-top: 0; color: var(--mo-text-muted); }
@media (max-width: 767px) { .mo-rn .mo-rn-pacijent { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Statistika/Index (.mo-st) - kartice koje same povlače podatke (Scripts/app/statistika.js)
   ========================================================================== */
.mo-st-filteri { position: sticky; top: 64px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; margin-bottom: 18px; background: rgba(245, 247, 251, .92); backdrop-filter: blur(6px); border: 1px solid var(--mo-border); border-radius: var(--mo-radius-lg); }
.mo-st-periodi { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-st-period { border: 1px solid var(--mo-border); background: var(--mo-card); color: var(--mo-text); border-radius: var(--mo-radius-pill); padding: 6px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; }
.mo-st-period:hover { border-color: #C9D6F5; }
.mo-st-period.aktivno { background: var(--mo-primary); border-color: var(--mo-primary); color: #fff; }
.mo-st-custom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mo-st-custom[hidden] { display: none; }
.mo-st-custom label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--mo-text-muted); }
.mo-st-custom input { width: 150px; }
.mo-st-poslovni { width: auto; min-width: 190px; }
.mo-st-opis { margin-left: auto; font-size: 12.5px; color: var(--mo-text); font-weight: 600; }
.mo-st-opis span { font-weight: 500; color: var(--mo-text-muted); }
.mo-st-opis .fa { color: var(--mo-primary); }

.mo-st-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; transition: opacity .2s; }
.mo-st-ploca { background: var(--mo-card); border: 1px solid var(--mo-border); border-radius: var(--mo-radius-lg); padding: 14px 16px; box-shadow: var(--mo-shadow-sm); min-height: 118px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mo-st-ploca-vrh { display: flex; align-items: center; gap: 8px; }
.mo-st-ikona { width: 30px; height: 30px; border-radius: 9px; background: var(--mo-primary-light); color: var(--mo-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: none; }
.mo-st-ploca-naziv { font-size: 12.5px; font-weight: 600; color: var(--mo-text-muted); }
.mo-st-ploca-vrijednost { font-size: 24px; font-weight: 800; color: var(--mo-text); letter-spacing: -.3px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-st-ploca-dno { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; margin-top: auto; }
.mo-st-napomena { color: var(--mo-text-muted); }
.mo-st-delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--mo-radius-pill); background: #f1f2f5; color: var(--mo-text-muted); font-weight: 700; }
.mo-st-delta.gore { background: var(--mo-success-bg); color: #0b7a54; }
.mo-st-delta.dolje { background: var(--mo-danger-bg); color: #c0392b; }
.mo-st-delta.novo { background: var(--mo-primary-light); color: var(--mo-primary-dark); }
.mo-st-ploca-nenaplaceno .mo-st-ikona { background: var(--mo-warning-bg); color: #b07a12; }

.mo-st-sekcija { display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; font-size: 16px; font-weight: 800; color: var(--mo-text); }
.mo-st-sekcija .fa { color: var(--mo-primary); }
.mo-st-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.mo-st-s4 { grid-column: span 4; }
.mo-st-s6 { grid-column: span 6; }
.mo-st-s8 { grid-column: span 8; }
.mo-st-s12 { grid-column: span 12; }
.mo-st-karta { background: var(--mo-card); border: 1px solid var(--mo-border); border-radius: var(--mo-radius-lg); box-shadow: var(--mo-shadow-sm); padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; }
.mo-st-karta > header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.mo-st-karta > header h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--mo-text); }
.mo-st-karta > header p { margin: 2px 0 0; font-size: 12px; color: var(--mo-text-muted); }
.mo-st-tablica-btn { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--mo-border); background: var(--mo-card); color: var(--mo-text-muted); border-radius: var(--mo-radius-pill); padding: 4px 10px; font-size: 11.5px; font-weight: 600; }
.mo-st-tablica-btn:hover { color: var(--mo-text); border-color: #C9D6F5; }
.mo-st-tablica-btn[aria-pressed="true"] { background: var(--mo-primary-light); border-color: var(--mo-primary-light); color: var(--mo-primary-dark); }
.mo-st-tijelo { flex: 1 1 auto; min-width: 0; transition: opacity .2s; }
.mo-st-osvjezava .mo-st-tijelo, .mo-st-kpi.mo-st-osvjezava { opacity: .45; }
.mo-st-platno { position: relative; width: 100%; }
.mo-st-tablica { display: none; }
.mo-st-kao-tablica .mo-st-graf { display: none; }
.mo-st-kao-tablica .mo-st-tablica { display: block; }
.mo-st-tbl { margin: 0; font-size: 12.5px; }
.mo-st-tbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--mo-text-muted); font-weight: 700; white-space: nowrap; }
.mo-st-tbl td { font-variant-numeric: tabular-nums; vertical-align: middle !important; }
.mo-st-tbl td a { font-weight: 600; }
.mo-st-kasni { color: #c0392b; font-weight: 700; }
.mo-st-poruka { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 140px; padding: 20px; text-align: center; color: var(--mo-text-muted); font-size: 13px; border: 1px dashed var(--mo-border); border-radius: var(--mo-radius-md); }
.mo-st-poruka .fa { color: #c3c9d6; font-size: 16px; }
.mo-st-greska { color: #c0392b; border-color: #f3c7c2; }
.mo-st-greska .fa { color: #c0392b; }

.mo-st-skeleton { background: linear-gradient(90deg, #eef0f4 25%, #f6f7fa 37%, #eef0f4 63%); background-size: 400% 100%; animation: mo-st-shimmer 1.3s ease infinite; border-color: transparent !important; box-shadow: none !important; }
.mo-st-skeleton-graf { height: 220px; border-radius: var(--mo-radius-md); }
@keyframes mo-st-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .mo-st-skeleton { animation: none; } }

.mo-st-heat-sazetak { font-size: 13px; margin-bottom: 10px; color: var(--mo-text); }
.mo-st-heat-sazetak span { color: var(--mo-text-muted); }
.mo-st-heat { display: grid; gap: 3px; }
.mo-st-heat-sat { font-size: 10.5px; color: var(--mo-text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.mo-st-heat-dan { font-size: 11.5px; font-weight: 600; color: var(--mo-text-muted); display: flex; align-items: center; }
.mo-st-heat-celija { height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #1b2437; font-variant-numeric: tabular-nums; outline: none; }
.mo-st-heat-celija span { opacity: 0; transition: opacity .12s; }
.mo-st-heat-celija:hover span, .mo-st-heat-celija:focus span { opacity: 1; }
.mo-st-heat-celija:hover, .mo-st-heat-celija:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--mo-text); }
.mo-st-heat-celija.tamna { color: #fff; }
.mo-st-heat-legenda { display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 10px; font-size: 11px; color: var(--mo-text-muted); }
.mo-st-heat-legenda i { width: 18px; height: 10px; border-radius: 3px; display: inline-block; }
.mo-st-heat-legenda span { margin: 0 4px; }

.mo-st-demo-traka { display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; margin: 4px 0 10px; }
.mo-st-demo-traka i, .mo-st-demo-brojke .kvadrat { background: #2a78d6; }
.mo-st-demo-traka i.s1, .mo-st-demo-brojke .kvadrat.s1 { background: #eb6834; }
.mo-st-demo-traka i.sx, .mo-st-demo-brojke .kvadrat.sx { background: #c3c9d6; }
.mo-st-demo-brojke { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.mo-st-demo-brojke .kvadrat { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.mo-st-demo-brojke small { color: var(--mo-text-muted); }
.mo-st-demo-naslov { margin: 16px 0 6px; font-size: 12px; font-weight: 700; color: var(--mo-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.mo-st-demo-napomena { margin-top: 10px; font-size: 12px; color: var(--mo-text-muted); background: #f7f9fc; border-radius: var(--mo-radius-sm); padding: 8px 10px; }
.mo-st-demo-napomena .fa { color: var(--mo-primary); }

.mo-st-lista { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; }
.mo-st-lista li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--mo-border); }
.mo-st-lista b { font-variant-numeric: tabular-nums; }
.mo-st-dok-brojke { display: flex; gap: 10px; margin-bottom: 10px; }
.mo-st-dok-brojke > div { flex: 1; background: #f7f9fc; border-radius: var(--mo-radius-md); padding: 8px 12px; }
.mo-st-dok-brojke b { display: block; font-size: 20px; font-weight: 800; color: var(--mo-text); }
.mo-st-dok-brojke span { font-size: 12px; color: var(--mo-text-muted); }

@media (max-width: 1199px) {
    .mo-st-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mo-st-s4 { grid-column: span 6; }
    .mo-st-s8 { grid-column: span 12; }
}
@media (max-width: 767px) {
    .mo-st-filteri { position: static; padding: 10px; }
    .mo-st-periodi { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
    .mo-st-periodi::-webkit-scrollbar { display: none; }
    .mo-st-period { white-space: nowrap; }
    .mo-st-opis { margin-left: 0; width: 100%; }
    .mo-st-poslovni { width: 100%; }
    .mo-st-kpi { gap: 10px; }
    .mo-st-ploca { padding: 12px; min-height: 104px; }
    .mo-st-ploca-vrijednost { font-size: 18px; }
    .mo-st-s4, .mo-st-s6, .mo-st-s8, .mo-st-s12 { grid-column: span 12; }
    .mo-st-karta { padding: 14px; }
    .mo-st-heat { grid-template-columns: 30px repeat(14, minmax(0, 1fr)) !important; gap: 2px; }
    .mo-st-heat-sat:nth-child(even) { visibility: hidden; }
    .mo-st-heat-celija { height: 22px; font-size: 0; }
}

/* ==========================================================================
   Prijava / registracija / lozinka (.mo-auth) - Views/Shared/_LayoutAuth.cshtml
   ========================================================================== */
/* Plava iz loga (Images/logo.png: #50A8E0 / #3C9CE0). Za tekst na bijelom i bijeli tekst na plavom ide
   tamnija nijansa iste boje (#2479BA = 4.65:1, WCAG AA) - sam #50A8E0 ima samo 2.6:1. */
body.mo-auth-body { margin: 0; background: #F4F8FB; color: var(--mo-text);
    --mo-primary: #2479BA; --mo-primary-dark: #1B6399; --mo-primary-light: #E6F3FC; --mo-auth-logo: #50A8E0; }
/* Raspored: gornja traka (logo), forma u sredini, red prednosti ispod, footer. Plava je samo akcent. */
.mo-auth { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; isolation: isolate; }
/* Pozadina: fina tačkasta mreža koja se gubi prema rubovima + meki plavi sjaj iza forme. */
.mo-auth::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image: radial-gradient(rgba(36, 121, 186, .14) 1px, transparent 1.3px); background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 18%, transparent 76%);
            mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 18%, transparent 76%); }
.mo-auth::after { content: ""; position: fixed; left: 50%; top: 46%; width: 980px; height: 760px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(80, 168, 224, .24), rgba(80, 168, 224, .09) 55%, rgba(80, 168, 224, 0)); }

.mo-auth-vrh { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 32px; }
.mo-auth-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--mo-text); font-size: 18px; font-weight: 600; text-decoration: none; }
.mo-auth-logo:hover, .mo-auth-logo:focus { color: var(--mo-text); text-decoration: none; }
.mo-auth-logo b { font-weight: 800; color: var(--mo-primary); }
.mo-auth-logo-ikona { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--mo-border); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(20, 60, 100, .10); }
.mo-auth-logo-ikona img { width: 28px; height: 28px; object-fit: contain; }
.mo-auth-sigurno { font-size: 12.5px; font-weight: 600; color: var(--mo-success); background: var(--mo-success-bg); padding: 5px 11px; border-radius: 999px; }

/* Kratke prednosti stranice (sekcija "Brand") kao čipovi ispod forme; naslov i opis se ne prikazuju -
   kartica s formom ima svoj pozdrav. */
.mo-auth-info { width: 100%; max-width: 780px; margin-top: 22px; }
.mo-auth-info h1, .mo-auth-info > p { display: none; }
.mo-auth-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mo-auth-lista li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: rgba(255, 255, 255, .82); border: 1px solid var(--mo-border); font-size: 12.5px; line-height: 1.3; color: var(--mo-text); }
.mo-auth-lista .fa { color: var(--mo-success); font-size: 11px; }

/* --pola = pola širine kartice (šira za Register, koji ima odjeljke). */
.mo-auth-scena { --pola: 220px; position: relative; width: 100%; display: flex; justify-content: center; }
.mo-auth-scena:has(.mo-auth-odjeljak) { --pola: 290px; }

.mo-auth-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 24px 28px; }
.mo-auth-kartica { position: relative; z-index: 1; width: 100%; max-width: calc(var(--pola) * 2); background: var(--mo-card); border: 1px solid var(--mo-border); border-radius: 22px;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .04), 0 28px 64px -14px rgba(20, 60, 110, .20); padding: 36px 36px 30px; }
.mo-auth-zaglavlje { margin-bottom: 24px; }
.mo-auth-znak { width: 48px; height: 48px; border-radius: 15px; background: var(--mo-primary-light); color: var(--mo-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.mo-auth-znak.zeleni { background: var(--mo-success-bg); color: var(--mo-success); }
.mo-auth-znak.crveni { background: var(--mo-danger-bg); color: var(--mo-danger); }
.mo-auth-zaglavlje h2, .mo-auth-uspjeh h2 { margin: 0 0 6px; font-size: 25px; font-weight: 800; letter-spacing: -.3px; color: var(--mo-text); }
.mo-auth-zaglavlje p, .mo-auth-uspjeh p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--mo-text-muted); }

.mo-auth-forma { margin: 0; }
.mo-auth-grupa { margin-bottom: 16px; min-width: 0; }
.mo-auth-grupa > label, .mo-auth-label-red label, .mo-auth-captcha > label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--mo-text); }
.mo-auth-grupa > label small { font-weight: 500; color: var(--mo-text-muted); }
.mo-auth-label-red { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mo-auth-label-red a { font-size: 12.5px; font-weight: 600; }
.mo-auth .form-control { height: 46px; border-radius: 12px; border: 1px solid #dfe3ea; background: #fbfcfe; font-size: 14.5px; box-shadow: none; padding: 10px 14px; color: var(--mo-text); transition: border-color .15s, box-shadow .15s, background .15s; }
.mo-auth textarea.form-control { height: auto; min-height: 70px; resize: vertical; }
.mo-auth select.form-control { padding-right: 10px; }
.mo-auth .form-control:focus { border-color: var(--mo-primary); background: #fff; box-shadow: 0 0 0 3px rgba(80, 168, 224, .28); }
.mo-auth .form-control[readonly] { background: #f3f5f9; color: var(--mo-text-muted); }
.mo-auth .input-validation-error { border-color: var(--mo-danger); }
.mo-auth-polje { position: relative; }
.mo-auth-polje > .fa { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #9aa3b2; font-size: 15px; pointer-events: none; }
.mo-auth-polje > .form-control { padding-left: 42px; }
.mo-auth-polje > .mo-auth-oko ~ .fa, .mo-auth-polje .form-control:not(:last-child) { padding-right: 46px; }
.mo-auth-oko { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: #9aa3b2; }
.mo-auth-oko:hover, .mo-auth-oko:focus { color: var(--mo-primary); background: var(--mo-primary-light); outline: none; }
.mo-auth-main a { color: var(--mo-primary); }
.mo-auth-main a:hover { color: var(--mo-primary-dark); }

.mo-auth-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; font-size: 13.5px; font-weight: 500; color: var(--mo-text); cursor: pointer; line-height: 1.45; }
.mo-auth-check input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--mo-primary); cursor: pointer; }
.mo-auth-check a { font-weight: 600; }

.mo-auth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px; border: 0; border-radius: 13px; background: var(--mo-primary); color: #fff !important; font-size: 15px; font-weight: 700; text-decoration: none !important; box-shadow: 0 8px 20px rgba(36, 121, 186, .28); transition: background .15s, transform .15s, box-shadow .15s; }
.mo-auth-btn:hover, .mo-auth-btn:focus { background: var(--mo-primary-dark); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(36, 121, 186, .34); outline: none; }
.mo-auth-btn .fa { font-size: 14px; transition: transform .15s; }
.mo-auth-btn:hover .fa { transform: translateX(3px); }
.mo-auth-btn.salje, .mo-auth-btn:disabled { opacity: .7; cursor: wait; transform: none; }
.mo-auth-btn-sekundarno { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 12px; border: 1px solid var(--mo-border); border-radius: 12px; background: var(--mo-card); color: var(--mo-text); font-weight: 600; font-size: 14px; }
.mo-auth-btn-sekundarno:hover { border-color: #a9d3ef; color: var(--mo-primary); }

.mo-auth-alt { margin: 20px 0 0; text-align: center; font-size: 13.5px; color: var(--mo-text-muted); }
.mo-auth-alt a { font-weight: 700; }
.mo-auth-napomena { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--mo-text-muted); text-align: center; }
.mo-auth-napomena .fa { color: var(--mo-primary); }

.mo-auth-greske { margin-bottom: 18px; padding: 11px 14px; border-radius: 12px; background: var(--mo-danger-bg); border: 1px solid #f5cdc8; color: #b3372d; font-size: 13.5px; }
.mo-auth-greske ul { margin: 0; padding-left: 18px; }
.mo-auth-greske.validation-summary-valid { display: none; }
.mo-auth-greska { display: block; margin-top: 5px; font-size: 12.5px; color: #c0392b; font-weight: 500; }
.mo-auth-greska.field-validation-valid { display: none; }
.mo-auth-greska[hidden] { display: none; }

.mo-auth-odjeljak { margin: 22px 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--mo-text-muted); display: flex; align-items: center; gap: 10px; }
.mo-auth-odjeljak::after { content: ""; flex: 1; height: 1px; background: var(--mo-border); }
.mo-auth-forma > .mo-auth-odjeljak:first-of-type { margin-top: 0; }
.mo-auth-dva { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

.mo-auth-captcha { margin: 6px 0 16px; padding: 14px; background: #f7f9fc; border: 1px solid var(--mo-border); border-radius: 14px; }
.mo-auth-captcha > label b { color: var(--mo-primary-dark); font-size: 15px; }
.mo-auth-captcha > label .fa { color: var(--mo-primary); }
.mo-auth-captcha .form-control { background: #fff; }
.mo-auth-kod-red { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; }
.mo-auth-kod { height: 46px; border: 1px dashed #a9d3ef; border-radius: 12px; background: var(--mo-primary-light); color: var(--mo-primary-dark); text-align: center; font: 700 19px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 4px; user-select: none; pointer-events: none; outline: none; width: 100%; }

.mo-auth-snaga { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.mo-auth-snaga i { height: 4px; border-radius: 99px; background: #e6e9ef; transition: background .2s; }
.mo-auth-snaga i.slaba { background: var(--mo-danger); }
.mo-auth-snaga i.srednja { background: var(--mo-warning); }
.mo-auth-snaga i.jaka { background: var(--mo-success); }

.mo-auth-uspjeh { text-align: center; }
.mo-auth-uspjeh .mo-auth-znak { width: 60px; height: 60px; border-radius: 50%; font-size: 24px; }
.mo-auth-uspjeh p { margin-bottom: 24px; }
.mo-auth-uspjeh .mo-auth-alt { margin: 18px 0 0; }
.mo-auth-znak.zuti { background: var(--mo-warning-bg); color: var(--mo-warning); }

/* Account/IstekLicence: korisnik na vrhu kartice, kontakt dugmad, traka preostalih dana */
.mo-lic-korisnik { display: flex; align-items: center; gap: 12px; margin: -6px 0 22px; padding: 10px 12px; border-radius: 14px; background: #f7f9fc; border: 1px solid var(--mo-border); }
.mo-lic-korisnik img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: var(--mo-primary-light); }
.mo-lic-korisnik div { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mo-lic-korisnik b { font-size: 14px; color: var(--mo-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-lic-korisnik span { font-size: 12.5px; color: var(--mo-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Account/InternalServerError */
.mo-err-detalji { margin: -6px 0 20px; padding: 10px 14px; border-radius: 14px; background: #f7f9fc; border: 1px solid var(--mo-border); font-size: 13px; }
.mo-err-detalji > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.mo-err-detalji span { color: var(--mo-text-muted); flex: none; }
.mo-err-detalji b { color: var(--mo-text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.mo-lic-kontakt { margin-top: -4px; }
.mo-lic-kontakt .mo-auth-btn .fa { transform: none; }
.mo-auth-uspjeh + .mo-lic-traka { margin-top: -8px; }
.mo-lic-traka { height: 6px; border-radius: 99px; background: #eef1f6; overflow: hidden; margin-bottom: 22px; }
.mo-lic-traka i { display: block; height: 100%; border-radius: 99px; background: var(--mo-warning); }
/* Obavijest o kolačićima (gdpr.css) u stilu aplikacije */
.mo-auth-body #gdpr-cookie-message { z-index: 1000; left: 20px; right: auto; bottom: 20px; max-width: 380px; background: #1b2437; border-radius: 16px; box-shadow: 0 16px 40px rgba(10, 20, 50, .35); font-family: inherit; }
.mo-auth-body #gdpr-cookie-message button { background: var(--mo-primary); border-radius: 10px; }

.mo-auth-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; padding: 16px 32px 20px; font-size: 12px; color: var(--mo-text-muted); }
.mo-auth-footer .fa { color: var(--mo-primary); }
.mo-auth-footer-linkovi { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; }
.mo-auth-footer a { color: var(--mo-text-muted); }
.mo-auth-footer a:hover { color: var(--mo-primary); }

@media (max-width: 767px) {
    .mo-auth-vrh { padding: 14px 16px; }
    .mo-auth-sigurno, .mo-auth-info { display: none; }
    .mo-auth-main { justify-content: flex-start; padding: 4px 14px 20px; }
    .mo-auth::after { width: 560px; height: 520px; top: 36%; }
    .mo-auth-footer { justify-content: center; text-align: center; padding: 12px 16px 18px; }
    .mo-auth-footer-linkovi { justify-content: center; }
}
@media (max-width: 520px) {
    .mo-auth-kartica { padding: 24px 18px 22px; border-radius: 18px; }
    .mo-auth-zaglavlje h2, .mo-auth-uspjeh h2 { font-size: 22px; }
    .mo-auth-dva { grid-template-columns: minmax(0, 1fr); }
    .mo-auth .form-control { font-size: 16px; }   /* iOS ne zumira polje */
}

/* ---------------------------------------------------------------------------------------------
   Karton: dokumenti pacijenta (Views/Karton/_detailsDokumenti), gumb "Akcije"
   --------------------------------------------------------------------------------------------- */
.mo-dok-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 10px; }
.mo-dok-tablica > tbody > tr > td { vertical-align: middle !important; }
.mo-dok-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: var(--mo-radius-sm); border: 1px solid var(--mo-border); cursor: zoom-in; background: var(--mo-bg); }
.mo-dok-ikona { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--mo-radius-sm); background: var(--mo-primary-light); color: var(--mo-primary); font-size: 20px; }
/* Meni je absolutno pozicioniran u uskom btn-group, pa bi se skupio na min-width 160px,
   a nowrap tekst ("Skeniraj karton (QR kod)") bi izletio van - širina po sadržaju. */
.mo-karton-akcije .dropdown-menu { width: max-content; min-width: 220px; max-width: calc(100vw - 24px); }
.mo-karton-akcije .dropdown-menu > li > a { padding: 8px 16px; }
/* Ikonice-dugmad u zadnjoj koloni (Karton saglasnosti...) u jednom redu, kolona široka koliko treba.
   Na mobitelu mo-table-cards ionako prebacuje td.mo-td-btns u flex red. */
@media (min-width: 768px) {
    table > tbody > tr > td.mo-td-btns { white-space: nowrap; width: 1%; text-align: right; }
    table > tbody > tr > td.mo-td-btns > .btn + .btn { margin-left: 4px; }
}
@media (max-width: 767px) {
    /* Na mobitelu je "Akcije" lijeva kolona .mo-action-grid - otvaraj udesno da ne ode van ekrana. */
    .mo-karton-akcije .dropdown-menu { left: 0; right: auto; }
    .mo-karton-akcije .dropdown-menu > li > a { white-space: normal; }
}
.mo-karton-akcije .dropdown-menu .fa-fw { color: var(--mo-text-muted); margin-right: 4px; }

/* Poslovi/Details: praćenje izmjena nalaza (Views/Poslovi/_detailsPromjeneNalaza) */
.mo-pn-unos { position: relative; padding: 0 0 12px 18px; border-left: 2px solid var(--mo-border); margin-left: 6px; }
.mo-pn-unos:last-child { padding-bottom: 0; }
.mo-pn-unos::before { content: ""; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--mo-card); border: 2px solid var(--mo-primary); }
.mo-pn-meta { font-size: 12px; color: var(--mo-text-muted); margin-bottom: 4px; }
.mo-pn-red { display: flex; gap: 12px; padding: 3px 0; font-size: 13px; }
.mo-pn-polje { flex: 0 0 34%; font-weight: 600; color: var(--mo-text); }
.mo-pn-vrijednosti { flex: 1 1 auto; min-width: 0; white-space: pre-line; }
.mo-pn-staro { color: var(--mo-text-muted); text-decoration: line-through; }
.mo-pn-novo { font-weight: 600; }

/* Status SMS stanice (Početna ispod statistike, Aktivnost -> SMS u čekanju) */
/* Pozivni broj sa zastavicom ispred telefona/mobitela (Scripts/app/pozivni-broj.js) */
.mo-pozivni { width: 100%; }
.mo-pozivni .mo-pozivni-btn { display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 34px; white-space: nowrap; }
.mo-pozivni .mo-pozivni-ikona img, .mo-pozivni-lista img { width: 16px; height: auto; vertical-align: middle; }
.mo-pozivni .mo-pozivni-dial { font-weight: 600; font-variant-numeric: tabular-nums; }
.mo-pozivni-lista { max-height: 280px; overflow-y: auto; min-width: 250px; }
.mo-pozivni-lista > li > a { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; line-height: 20px; }
.mo-pozivni-lista .fa-globe { width: 16px; text-align: center; color: var(--mo-text-muted); }

/* Stat red (.mo-stat-row) nema donju marginu, pa negativna margina ovdje navlači pilulu preko kartica. */
.mo-sms-stanica-red { display: flex; justify-content: flex-end; margin: 12px 0 0; padding: 0; }
.mo-sms-stanica { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--mo-text-muted); padding: 3px 10px; border-radius: var(--mo-radius-pill); background: var(--mo-card); border: 1px solid var(--mo-border); text-decoration: none; }
a.mo-sms-stanica[href]:hover { color: var(--mo-text); border-color: var(--mo-primary); text-decoration: none; }
.mo-sms-stanica-sitno { opacity: .85; }
.mo-sms-stanica-tocka { width: 8px; height: 8px; border-radius: 50%; background: var(--mo-text-muted); flex: none; }
.mo-sms-stanica--online .mo-sms-stanica-tocka { background: var(--mo-success); box-shadow: 0 0 0 3px var(--mo-success-bg); }
.mo-sms-stanica--neaktivna .mo-sms-stanica-tocka { background: var(--mo-warning); box-shadow: 0 0 0 3px var(--mo-warning-bg); }
.mo-sms-stanica--offline .mo-sms-stanica-tocka { background: var(--mo-danger); box-shadow: 0 0 0 3px var(--mo-danger-bg); }
.mo-sms-stanica--offline, .mo-sms-stanica--neaktivna { color: var(--mo-text); }

/* Živa tačka: val koji se širi iz tačke (boja = boja tačke preko background: inherit).
   Online miran "radar" puls, ne javlja se sporiji, offline brži val + treptanje same tačke. */
.mo-sms-stanica-tocka { position: relative; margin: 0 4px 0 2px; }
.mo-sms-stanica--online .mo-sms-stanica-tocka::after,
.mo-sms-stanica--neaktivna .mo-sms-stanica-tocka::after,
.mo-sms-stanica--offline .mo-sms-stanica-tocka::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit;
    animation: mo-tocka-val 2.4s cubic-bezier(.2, .6, .35, 1) infinite; pointer-events: none;
}
.mo-sms-stanica--neaktivna .mo-sms-stanica-tocka::after { animation-duration: 3.2s; }
.mo-sms-stanica--offline .mo-sms-stanica-tocka::after { animation-duration: 1.4s; }
.mo-sms-stanica--offline .mo-sms-stanica-tocka { animation: mo-tocka-treptaj 1.4s ease-in-out infinite; }

@keyframes mo-tocka-val {
    0% { transform: scale(1); opacity: .55; }
    80%, 100% { transform: scale(3.2); opacity: 0; }
}
@keyframes mo-tocka-treptaj {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .mo-sms-stanica-tocka, .mo-sms-stanica-tocka::after { animation: none !important; }
}

@media (max-width: 767px) {
    .mo-sms-stanica-red { order: 2; justify-content: center; margin: -8px 0 16px; padding: 0; }
    .mo-pn-red { flex-direction: column; gap: 0; }
    .mo-pn-polje { flex-basis: auto; }
    table.mo-table-cards.mo-dok-tablica > tbody > tr > td.mo-dok-thumb-td { float: left; margin-right: 10px; padding: 0 !important; border: 0 !important; }
}

/* Kendo DropDownList / ComboBox / DatePicker / NumericTextBox / MultiSelect - ista visina (40px) i zaobljenje
   kao .form-control. Pager, filteri u gridu i toolbar kalendara ostaju kompaktni (vraćeno ispod). */
.k-dropdown .k-dropdown-wrap, .k-combobox .k-dropdown-wrap, .k-picker-wrap, .k-numeric-wrap { border-radius: 8px; }
.k-dropdown .k-dropdown-wrap .k-input, .k-combobox .k-dropdown-wrap .k-input,
.k-picker-wrap .k-input, .k-numeric-wrap .k-input { height: 38px; line-height: 38px; padding-top: 0; padding-bottom: 0; }
.k-dropdown .k-dropdown-wrap .k-select, .k-combobox .k-dropdown-wrap .k-select,
.k-picker-wrap .k-select, .k-numeric-wrap .k-select { min-height: 38px; line-height: 38px; }
.k-multiselect .k-multiselect-wrap { min-height: 40px; border-radius: 8px; }
.k-multiselect .k-multiselect-wrap .k-input { height: 38px; line-height: 38px; }
.k-multiselect .k-multiselect-wrap li.k-button { margin-top: 6px; }
.k-pager-wrap .k-dropdown .k-dropdown-wrap .k-input, .k-pager-wrap .k-dropdown .k-dropdown-wrap .k-select,
.k-grid .k-dropdown .k-dropdown-wrap .k-input, .k-grid .k-dropdown .k-dropdown-wrap .k-select,
.k-grid .k-picker-wrap .k-input, .k-grid .k-picker-wrap .k-select, .k-grid .k-numeric-wrap .k-input, .k-grid .k-numeric-wrap .k-select,
.k-filter-menu .k-dropdown-wrap .k-input, .k-filter-menu .k-dropdown-wrap .k-select,
.k-filter-menu .k-picker-wrap .k-input, .k-filter-menu .k-picker-wrap .k-select, .k-filter-menu .k-numeric-wrap .k-input, .k-filter-menu .k-numeric-wrap .k-select,
.k-scheduler-toolbar .k-dropdown-wrap .k-input, .k-scheduler-toolbar .k-dropdown-wrap .k-select { height: auto; min-height: 0; line-height: 1.42857143; padding-top: 4px; padding-bottom: 4px; }

/* ===== Uputstva (Help/Index) - javna stranica, .mo-up-* ===== */
.mo-up-body { background: var(--mo-bg); color: var(--mo-text); scroll-behavior: smooth; }
.mo-up-body .mo-up-sekcija { scroll-margin-top: 80px; }
.mo-up-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--mo-border); }
.mo-up-logo { white-space: nowrap; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; color: var(--mo-text); text-decoration: none !important; }
.mo-up-logo img { height: 28px; }
.mo-up-logo em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--mo-text-muted); padding-left: 10px; margin-left: 4px; border-left: 1px solid var(--mo-border); }
.mo-up-top-desno { display: flex; gap: 8px; }
.mo-up-hero { max-width: 1240px; margin: 0 auto; padding: 44px 24px 26px; text-align: center; }
.mo-up-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px; }
.mo-up-hero > p { max-width: 640px; margin: 0 auto 22px; font-size: 15.5px; color: var(--mo-text-muted); line-height: 1.6; }
.mo-up-trazi { position: relative; max-width: 560px; margin: 0 auto 16px; }
.mo-up-trazi i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--mo-text-muted); }
.mo-up-trazi input { width: 100%; height: 50px; padding: 0 16px 0 42px; border-radius: var(--mo-radius-pill); border: 1px solid var(--mo-border); background: #fff; font-size: 15px; box-shadow: var(--mo-shadow); outline: none; }
.mo-up-trazi input:focus { border-color: var(--mo-primary); }
.mo-up-brzo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mo-up-brzo a { padding: 6px 14px; border-radius: var(--mo-radius-pill); background: #fff; border: 1px solid var(--mo-border); font-size: 13px; font-weight: 600; color: var(--mo-text); text-decoration: none; }
.mo-up-brzo a:hover { border-color: var(--mo-primary); color: var(--mo-primary); }
.mo-up-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px 40px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; align-items: start; }
.mo-up-toc { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; background: #fff; border-radius: var(--mo-radius-lg); box-shadow: var(--mo-shadow); padding: 16px 10px; }
.mo-up-toc-naslov { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mo-text-muted); padding: 0 10px 8px; }
.mo-up-toc nav a { display: block; padding: 6px 10px; border-radius: var(--mo-radius-sm); font-size: 13.5px; color: var(--mo-text); text-decoration: none; }
.mo-up-toc nav a:hover { background: var(--mo-bg); }
.mo-up-toc nav a.aktivan { background: var(--mo-primary-light); color: var(--mo-primary); font-weight: 700; }
.mo-up-toc nav a.mo-up-toc-cta { margin-top: 8px; background: var(--mo-primary); color: #fff; text-align: center; font-weight: 700; }
.mo-up-sadrzaj { min-width: 0; }
.mo-up-sekcija { background: #fff; border-radius: var(--mo-radius-lg); box-shadow: var(--mo-shadow); padding: 28px 32px; margin-bottom: 20px; font-size: 14.5px; line-height: 1.65; }
.mo-up-sekcija h2 { font-size: 22px; font-weight: 800; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.mo-up-sekcija h2 .fa { width: 38px; height: 38px; border-radius: 11px; background: var(--mo-primary-light); color: var(--mo-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; flex: none; }
.mo-up-sekcija h3 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.mo-up-sekcija ol, .mo-up-sekcija ul { padding-left: 22px; margin-bottom: 12px; }
.mo-up-sekcija li { margin-bottom: 5px; }
.mo-up-sekcija code { background: var(--mo-bg); color: var(--mo-primary-dark); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.mo-up-sekcija kbd { background: var(--mo-text); border-radius: 5px; font-size: 11.5px; padding: 1px 6px; }
.mo-up-slika { margin: 14px 0 18px; }
.mo-up-slika img { display: block; width: 100%; height: auto; border-radius: var(--mo-radius-md); border: 1px solid var(--mo-border); box-shadow: 0 8px 24px rgba(20,30,60,.08); cursor: zoom-in; transition: transform .15s; }
.mo-up-slika img:hover { transform: translateY(-2px); }
.mo-up-slika figcaption { font-size: 12.5px; color: var(--mo-text-muted); text-align: center; margin-top: 8px; }
.mo-up-slika-uska { max-width: 420px; }
.mo-up-slika-srednja { max-width: 760px; margin-left: auto; margin-right: auto; }
.mo-up-savjet { display: block; position: relative; padding: 12px 14px 12px 40px; margin: 12px 0; border-radius: var(--mo-radius-md); background: var(--mo-primary-light); color: #1d3f86; font-size: 13.5px; }
.mo-up-savjet > .fa:first-child { position: absolute; left: 14px; top: 15px; font-size: 15px; color: var(--mo-primary); }
.mo-up-koraci { display: grid; gap: 8px; }
.mo-up-koraci > div { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); }
.mo-up-koraci b { width: 28px; height: 28px; border-radius: 50%; background: var(--mo-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; }
.mo-up-oznaka { display: inline-block; padding: 1px 9px; border-radius: var(--mo-radius-pill); font-size: 12px; font-weight: 700; }
.mo-up-oznaka.siva { background: #EEF1F6; color: #5b6478; }
.mo-up-oznaka.zelena { background: var(--mo-success-bg); color: var(--mo-success); }
.mo-up-oznaka.crvena { background: var(--mo-danger-bg); color: var(--mo-danger); }
.mo-up-oznaka.zuta { background: var(--mo-warning-bg); color: var(--mo-warning); }
.mo-up-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mo-up-faq details { border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); padding: 0 16px; margin-bottom: 8px; }
.mo-up-faq summary { cursor: pointer; padding: 13px 24px 13px 0; font-weight: 700; list-style: none; position: relative; }
.mo-up-faq summary::-webkit-details-marker { display: none; }
.mo-up-faq summary::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 20px; color: var(--mo-primary); }
.mo-up-faq details[open] summary::after { content: "\2212"; }
.mo-up-faq details p { margin: 0 0 14px; color: #3c465a; }
.mo-up-nema { background: #fff; border-radius: var(--mo-radius-lg); padding: 24px; margin-bottom: 20px; text-align: center; color: var(--mo-text-muted); }
.mo-up-prez { background: linear-gradient(135deg, #fff 0%, #f3f7ff 100%); border: 1px solid #dbe6fb; }
.mo-up-prez-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; margin-top: 8px; }
.mo-up-forma label { display: block; font-size: 12.5px; font-weight: 600; color: var(--mo-text-muted); margin: 0; }
.mo-up-forma label .form-control { margin-top: 5px; color: var(--mo-text); font-weight: 400; }
.mo-up-polja { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.mo-up-forma .mo-up-puna { margin-bottom: 12px; }
.mo-up-zamka { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mo-up-forma-dno { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mo-up-forma .mo-up-captcha { display: flex; align-items: center; gap: 10px; }
.mo-up-forma .mo-up-captcha input { width: 80px; margin-top: 0; }
.mo-up-forma-dno .btn { height: 44px; padding: 0 22px; font-weight: 700; }
.mo-up-poruka { margin-top: 14px; padding: 12px 14px; border-radius: var(--mo-radius-md); font-weight: 600; }
.mo-up-poruka.uspjeh { background: var(--mo-success-bg); color: #0f7a54; }
.mo-up-poruka.greska { background: var(--mo-danger-bg); color: #b8392f; }
.mo-up-kontakt { background: #fff; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-lg); padding: 20px; }
.mo-up-kontakt h3 { margin-top: 0; }
.mo-up-kontakt a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-weight: 700; color: var(--mo-text); text-decoration: none; border-bottom: 1px solid var(--mo-border); word-break: break-all; }
.mo-up-kontakt a .fa { width: 32px; height: 32px; border-radius: 9px; background: var(--mo-primary-light); color: var(--mo-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mo-up-kontakt p { margin: 12px 0 0; font-size: 13px; color: var(--mo-text-muted); }
.mo-up-footer { text-align: center; font-size: 12.5px; color: var(--mo-text-muted); padding: 8px 0 20px; }
.mo-up-lightbox { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; background: rgba(15,22,38,.86); padding: 40px; align-items: center; justify-content: center; flex-direction: column; cursor: zoom-out; }
.mo-up-lightbox.otvoren { display: flex; }
.mo-up-lightbox img { max-width: 100%; max-height: calc(100vh - 110px); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.4); cursor: default; }
.mo-up-lightbox-opis { color: #e6ebf5; margin-top: 12px; font-size: 14px; }
.mo-up-lightbox-x { position: absolute; top: 14px; right: 20px; background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; }
@media (max-width: 991px) {
    .mo-up-wrap { grid-template-columns: 1fr; }
    .mo-up-toc { position: static; max-height: none; padding: 10px; }
    .mo-up-toc-naslov { display: none; }
    .mo-up-toc nav { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mo-up-toc nav a { white-space: nowrap; flex: none; }
    .mo-up-toc nav a.mo-up-toc-cta { margin-top: 0; }
}
@media (max-width: 767px) {
    .mo-up-top { padding: 8px 12px; }
    .mo-up-logo em, .mo-up-skriveno-xs { display: none; }
    .mo-up-hero { padding: 26px 12px 18px; }
    .mo-up-hero h1 { font-size: 25px; }
    .mo-up-wrap { padding: 0 12px 24px; gap: 14px; }
    .mo-up-sekcija { padding: 20px 16px; }
    .mo-up-grid2, .mo-up-prez-grid, .mo-up-polja { grid-template-columns: 1fr; }
    .mo-up-lightbox { padding: 12px; }
}
.mo-rn-upozorenje { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.mo-rn-upozorenje > .fa { font-size: 18px; }
.mo-rn-upozorenje > span { flex: 1 1 280px; }

/* "Više" -> Pomoć i podrška: uvijek zadnja stavka, odvojena linijom od modula */
#moNav .dropdown-menu > .mo-nav-divider-podrska { margin: 6px 4px; background: var(--mo-border); }
#moNav .dropdown-menu > .mo-nav-podrska > a .fa { color: var(--mo-primary); }

/* Karton/Index - tabela usluga (#tablePoslovi). Kod stomatologa ima 7 kolona u col-lg-8 pa su
   Doktor/Zub (bili fiksno 16%) gutali prostor, a dugmad Otvori + Ispis padala jedno ispod drugog.
   Desktop: dugmad u jednom redu (kolona široka koliko treba), kratke kolone bez prelamanja,
   zubi kao sitne oznake, Opis uzima ostatak. */
@media (min-width: 768px) {
    #tablePoslovi > thead > tr > th { white-space: nowrap; }
    #tablePoslovi > tbody > tr > td { vertical-align: middle; }
    #tablePoslovi > tbody > tr > td.mo-td-action { width: 1%; white-space: nowrap; text-align: right; }
    #tablePoslovi > tbody > tr > td.mo-td-action .btn { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 0 4px; }
    #tablePoslovi > tbody > tr > td.mo-td-title { min-width: 120px; }
    #tablePoslovi > tbody > tr > td.mo-td-title small { white-space: nowrap; }
    #tablePoslovi > tbody > tr > td[data-label="Status"] .label { white-space: nowrap; }
    #tablePoslovi > tbody > tr > td[data-label="Doktor"] { min-width: 90px; }
    #tablePoslovi > tbody > tr > td[data-label="Zub"] { min-width: 70px; max-width: 150px; }
    #tablePoslovi > tbody > tr > td[data-label="Zub"] .tag-list { margin: 0; display: flex; flex-wrap: wrap; gap: 3px; }
    #tablePoslovi > tbody > tr > td[data-label="Zub"] .tag-list li { float: none; }
    #tablePoslovi > tbody > tr > td[data-label="Zub"] .tag-list li a { margin: 0; padding: 2px 7px; font-size: 11px; font-weight: 600; border-radius: 6px; }
    #tablePoslovi > tbody > tr > td.mo-td-wide { min-width: 140px; }
}

/* Mobitel (kartice): Otvori + Ispis u jednom redu umjesto dva dugmeta preko cijele širine */
@media (max-width: 767px) {
    table.mo-table-cards#tablePoslovi > tbody > tr > td.mo-td-action { display: flex; gap: 8px; }
    table.mo-table-cards#tablePoslovi > tbody > tr > td.mo-td-action .btn { width: auto; flex: 1 1 auto; }
    table.mo-table-cards#tablePoslovi > tbody > tr > td.mo-td-action .btn + .btn { flex: 0 0 48px; }
}

/* Administracija -> "Aktivnost ordinacija" (Views/Administracija/_AktivnostOrdinacija) + popup Kontaktiraj */
.mo-ak-alati { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mo-ak-filteri { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-ak-filter { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mo-border); background: #fff; border-radius: var(--mo-radius-pill); padding: 5px 12px; font-size: 12.5px; color: var(--mo-text); }
.mo-ak-filter b { color: var(--mo-text-muted); font-weight: 700; }
.mo-ak-filter.active { border-color: var(--mo-primary); background: var(--mo-primary-light); color: var(--mo-primary); }
.mo-ak-desno { display: flex; gap: 6px; }
.mo-ak-desno input { width: 220px; }
.mo-ak-tocka { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #C3CAD6; }
.mo-ak-tocka.danas { background: var(--mo-success); }
.mo-ak-tocka.sedmica { background: #7BC89A; }
.mo-ak-tocka.mjesec { background: var(--mo-warning); }
.mo-ak-tocka.neaktivna { background: var(--mo-danger); }
.mo-ak-tocka.nikad { background: #8A93A6; }
.mo-ak-stanje { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.mo-ak-stanje.neaktivna { color: var(--mo-danger); }
.mo-ak-sub { font-size: 11.5px; color: var(--mo-text-muted); }
.mo-ak-kontakt { display: inline-block; padding: 2px 8px; border-radius: var(--mo-radius-pill); font-size: 11px; font-weight: 700; background: var(--mo-primary-light); color: var(--mo-primary); }
.mo-ak-kontakt.deaktivacija { background: var(--mo-danger-bg); color: var(--mo-danger); }
.mo-kt-firma { display: block; color: var(--mo-text-muted); margin-top: 2px; }
.mo-kt-tabovi { margin-bottom: 10px; }
.mo-kt-opis { font-size: 12.5px; margin-bottom: 14px; }
.mo-kt-kanal { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px; }
.mo-kt-kanal .form-control { max-width: 320px; }
.mo-kt-prekidac { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; min-width: 80px; }
.mo-kt-email-dio .form-control { margin-bottom: 8px; }
@media (max-width: 767px) {
    .mo-ak-desno, .mo-ak-desno input { width: 100%; }
    .mo-kt-kanal { flex-wrap: wrap; }
}

/* Racuni/Index: filter Svi / Neplaćeni / Plaćeni (RacuniController.FiltrirajPoPlacanju) */
.mo-racuni-filter-red { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.mo-racuni-placeno .btn.active { background: var(--mo-primary-light); border-color: var(--mo-primary); color: var(--mo-primary); box-shadow: none; }
.stat-mini-card.mo-klik { cursor: pointer; }
@media (max-width: 767px) {
    .mo-racuni-filter-red { justify-content: stretch; }
    .mo-racuni-placeno { display: flex; width: 100%; }
    .mo-racuni-placeno .btn { flex: 1 1 0; }
}

/* ============================================================================================
   Vrste usluga (Poslovi/VrstePoslova): lista vrsta + odabrana vrsta s poljima, tab Polja, tab Padajuće liste.
   ============================================================================================ */
.mo-vu-tabovi { margin-bottom: 16px; max-width: 620px; }
.mo-vu-broj { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: var(--mo-radius-pill); background: var(--mo-bg); color: var(--mo-text-muted); font-size: 11px; font-weight: 700; line-height: 18px; }
.mo-vu .mo-vu-kartica > .ibox-content { border-radius: var(--mo-radius-lg); padding: 18px 20px; }
.mo-vu-trazi { position: relative; flex: 1 1 auto; margin-bottom: 12px; }
.mo-vu-trazi > .fa { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mo-text-muted); }
.mo-vu-trazi > .form-control { padding-left: 34px; }
.mo-vu-alatna { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mo-vu-alatna .mo-vu-trazi { margin-bottom: 0; max-width: 360px; }
.mo-vu-alatna > .btn, .mo-vu-alatna > p + .btn { margin-left: auto; }
.mo-vu-ucitavanje { padding: 30px 0; text-align: center; color: var(--mo-text-muted); }

.mo-vu-lista { display: flex; flex-direction: column; gap: 4px; max-height: 620px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.mo-vu-stavka { display: block; padding: 10px 12px; border-radius: var(--mo-radius-md); color: var(--mo-text); border: 1px solid transparent; }
.mo-vu-stavka:hover, .mo-vu-stavka:focus { background: var(--mo-bg); color: var(--mo-text); text-decoration: none; }
.mo-vu-stavka.active { background: var(--mo-primary-light); border-color: rgba(47, 111, 237, .25); }
.mo-vu-stavka.active .mo-vu-stavka-naziv { color: var(--mo-primary-dark); }
.mo-vu-stavka-naziv { display: block; font-weight: 600; }
.mo-vu-stavka-meta { display: block; font-size: 12px; color: var(--mo-text-muted); margin-top: 2px; }

.mo-vu-prazno { text-align: center; padding: 40px 10px; color: var(--mo-text-muted); }
.mo-vu-prazno > .fa { font-size: 30px; opacity: .45; display: block; margin-bottom: 10px; }
.mo-vu-prazno p { margin-bottom: 12px; }
.mo-vu-prazno-malo { padding: 18px 10px; }
.mo-vu-prazno-malo > .fa { font-size: 22px; }

.mo-vu-zaglavlje { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--mo-border); }
.mo-vu-zaglavlje h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.mo-vu-zaglavlje p { margin: 0 0 6px; }
.mo-vu-zaglavlje-akcije { margin-left: auto; white-space: nowrap; }
.mo-vu-oznake .label { margin-right: 4px; }
.mo-vu .mo-vu-obrisi:hover { color: var(--mo-danger); border-color: var(--mo-danger); }

.mo-vu-sekcija { padding-top: 14px; }
.mo-vu-sekcija-naslov { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.mo-vu-sekcija-naslov h4 { margin: 0; font-size: 14px; font-weight: 700; }
.mo-vu-sekcija-naslov > .text-muted { font-size: 12px; }
.mo-vu-sekcija-naslov > .btn { margin-left: auto; }

.mo-vu-polja { list-style: none; margin: 0; padding: 0; }
.mo-vu-polja > li { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-bottom: 1px solid var(--mo-border); }
.mo-vu-polja > li:last-child { border-bottom: 0; }
.mo-vu-polja > li:hover { background: var(--mo-bg); border-radius: var(--mo-radius-sm); }
.mo-vu-rb { width: 18px; text-align: right; font-size: 12px; color: var(--mo-text-muted); flex: none; }
.mo-vu-ikona { width: 30px; height: 30px; border-radius: 50%; background: var(--mo-primary-light); color: var(--mo-primary); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; }
.mo-vu-polje-tekst { flex: 1 1 auto; min-width: 0; }
.mo-vu-polje-tekst strong { display: block; font-weight: 600; }
.mo-vu-polje-tekst small { display: block; color: var(--mo-text-muted); font-size: 12px; }
.mo-vu-polje-oznake { flex: none; }
.mo-vu-polje-akcije { flex: none; white-space: nowrap; }
.mo-vu-polje-akcije .btn-link, .mo-vu-lista-akcije .btn-link { color: var(--mo-text-muted); }
.mo-vu-polje-akcije .btn-link:hover { color: var(--mo-primary); }
.mo-vu .mo-vu-ukloni:hover { color: var(--mo-danger) !important; }
.mo-vu-zakljucano { display: inline-block; width: 26px; text-align: center; color: var(--mo-text-muted); opacity: .6; cursor: help; font-size: 12px; }

.mo-vu-tablica .mo-vu-ikona { width: 26px; height: 26px; font-size: 12px; margin-right: 4px; }
.mo-vu-tablica > tbody > tr > td { vertical-align: middle; }
.mo-vu-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; margin: 2px 2px 2px 0; border-radius: var(--mo-radius-pill); background: var(--mo-bg); border: 1px solid var(--mo-border); color: var(--mo-text); font-size: 12px; }
a.mo-vu-chip:hover { border-color: var(--mo-primary); color: var(--mo-primary); text-decoration: none; }
.mo-vu-chip > button { border: 0; background: none; padding: 0 0 0 2px; color: var(--mo-text-muted); font-size: 15px; line-height: 1; }
.mo-vu-chip > button:hover { color: var(--mo-danger); }

.mo-vu-lista-kartica { margin-bottom: 16px; }
.mo-vu-lista-zaglavlje { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.mo-vu-lista-zaglavlje h4 { margin: 0; font-size: 15px; font-weight: 700; }
.mo-vu-lista-zaglavlje > .text-muted { font-size: 12px; }
.mo-vu-lista-akcije { margin-left: auto; white-space: nowrap; }
.mo-vu-vrijednosti { min-height: 30px; margin-bottom: 10px; }

.mo-vu-izbor { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.mo-vu-izbor-stavka { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); font-weight: normal; cursor: pointer; }
.mo-vu-izbor-stavka:hover { border-color: var(--mo-primary); }
.mo-vu-izbor-stavka.active { background: var(--mo-primary-light); border-color: rgba(47, 111, 237, .35); }
.mo-vu-izbor-stavka > input { margin: 0; flex: none; }

.mo-vu-tipovi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.mo-vu-tip { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); background: var(--mo-card); color: var(--mo-text); }
.mo-vu-tip > .fa { color: var(--mo-primary); margin-bottom: 6px; }
.mo-vu-tip > strong { font-size: 13px; }
.mo-vu-tip > small { color: var(--mo-text-muted); font-size: 11.5px; line-height: 1.35; }
.mo-vu-tip:hover:not([disabled]) { border-color: var(--mo-primary); }
.mo-vu-tip.active { border-color: var(--mo-primary); background: var(--mo-primary-light); box-shadow: 0 0 0 1px var(--mo-primary) inset; }
.mo-vu-tip[disabled]:not(.active) { opacity: .45; cursor: not-allowed; }
.mo-vu-tip-nova { border-style: dashed; }
.mo-vu-broj-postavke { margin-top: 4px; padding: 12px 12px 0; border-radius: var(--mo-radius-md); background: var(--mo-bg); margin-bottom: 12px; }

@media (max-width: 991px) {
    .mo-vu-lista { max-height: 280px; }
}
@media (max-width: 767px) {
    /* Redovi su unutar .tab-content pa ih globalno "ravnanje" .wrapper-content > .row ne hvata. */
    .mo-vu .tab-pane > .row { margin-left: 0; margin-right: 0; }
    .mo-vu .tab-pane > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
    .mo-vu .mo-vu-kartica > .ibox-content { padding: 14px; }
    .mo-vu-rb { display: none; }
    .mo-vu-tabovi { max-width: none; }
    .mo-vu-alatna { flex-wrap: wrap; }
    .mo-vu-alatna .mo-vu-trazi { max-width: none; flex-basis: 100%; }
    .mo-vu-alatna > .btn { margin-left: 0; width: 100%; }
    .mo-vu-zaglavlje { flex-wrap: wrap; }
    .mo-vu-polje-oznake { display: none; }
    .mo-vu-tipovi { grid-template-columns: 1fr 1fr; }
}

/* Statusi usluga (Statusi/Index): stupac po fazi, popup s fazom i paletom boja. Dijeli .mo-vu-* s Vrstama usluga. */
.mo-sts-uvod { max-width: 900px; margin-bottom: 16px; }
.mo-sts-faza { margin-bottom: 18px; }
.mo-sts-faza-naslov { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--mo-border); }
.mo-sts-faza-naslov h4 { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.mo-sts-faza-naslov small { display: block; line-height: 1.35; }
.mo-sts-lista { list-style: none; margin: 0 0 10px; padding: 0; }
.mo-sts-lista > li { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--mo-border); }
.mo-sts-lista > li:last-child { border-bottom: 0; }
.mo-sts-pill { color: #fff !important; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-sts-pocetni { font-size: 11px; color: var(--mo-primary); background: var(--mo-primary-light); border-radius: var(--mo-radius-pill); padding: 1px 8px; white-space: nowrap; }
.mo-sts-broj { margin-left: auto; font-size: 12px; color: var(--mo-text-muted); white-space: nowrap; }
.mo-sts-dodaj { border-style: dashed; color: var(--mo-text-muted); }
.mo-sts-faze-izbor { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mo-sts-paleta { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-sts-boja { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--mo-border); padding: 0; margin: 0; cursor: pointer; position: relative; }
.mo-sts-boja.active { box-shadow: 0 0 0 2px var(--mo-text); }
.mo-sts-boja-vlastita { display: inline-flex; align-items: center; justify-content: center; background: var(--mo-bg); color: var(--mo-text-muted); overflow: hidden; }
.mo-sts-boja-vlastita input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.mo-sts-pregled { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--mo-radius-md); background: var(--mo-bg); }
.mo-sts-pregled .label { color: #fff; }

/* ===== Realtime obavijesti: "Vidi više" u toastu + popup s detaljima (Scripts/app/obavijesti.js, Views/Obavijesti) ===== */
.mo-ob-toast-akcije { margin-top: 8px; }
.mo-ob-toast-akcije .btn { color: var(--mo-text) !important; font-weight: 600; }
.mo-ob-modal .modal-dialog { width: 640px; max-width: calc(100% - 20px); }
.mo-ob-modal .modal-body { padding: 18px 20px 20px; }
.mo-ob-naslov { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--mo-radius-md); background: var(--mo-bg); margin-bottom: 16px; }
.mo-ob-naslov > i { font-size: 26px; color: var(--mo-text-muted); flex: none; }
.mo-ob-naslov b { display: block; font-size: 15px; color: var(--mo-text); }
.mo-ob-naslov small { color: var(--mo-text-muted); }
.mo-ob-naslov.zeleno { background: var(--mo-success-bg); } .mo-ob-naslov.zeleno > i { color: var(--mo-success); }
.mo-ob-naslov.crveno { background: var(--mo-danger-bg); } .mo-ob-naslov.crveno > i { color: var(--mo-danger); }
.mo-ob-naslov.plavo { background: var(--mo-primary-light); } .mo-ob-naslov.plavo > i { color: var(--mo-primary); }
.mo-ob-blok { margin-bottom: 16px; }
.mo-ob-blok h6 { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mo-text-muted); }
.mo-ob-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin: 0; }
.mo-ob-dl dt { font-weight: 500; color: var(--mo-text-muted); }
.mo-ob-dl dd { margin: 0; color: var(--mo-text); word-break: break-word; }
.mo-ob-pacijent { border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); padding: 12px 14px; margin-bottom: 10px; }
.mo-ob-pacijent-glava { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mo-ob-pacijent-glava b { display: block; color: var(--mo-text); }
.mo-ob-pacijent-glava small { color: var(--mo-text-muted); }
.mo-ob-avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--mo-primary-light); color: var(--mo-primary); font-weight: 700; }
.mo-ob-cipovi { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-ob-cip { font-size: 12px; padding: 3px 10px; border-radius: var(--mo-radius-pill); background: var(--mo-bg); color: var(--mo-text-muted); }
.mo-ob-cip.zeleno { background: var(--mo-success-bg); color: var(--mo-success); }
.mo-ob-cip.crveno { background: var(--mo-danger-bg); color: var(--mo-danger); }
.mo-ob-akcije { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--mo-border); }
.mo-ob-dokumenti { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.mo-ob-dokument { border: 1px solid var(--mo-border); border-radius: var(--mo-radius-md); overflow: hidden; background: var(--mo-card); }
.mo-ob-dokument-pregled { display: block; width: 100%; height: 170px; border: 0; background: var(--mo-bg); }
.mo-ob-dokument-pregled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-ob-dokumenti .mo-ob-dokument:only-child { grid-column: 1 / -1; }
.mo-ob-dokumenti .mo-ob-dokument:only-child .mo-ob-dokument-pregled { height: 360px; }
.mo-ob-dokumenti .mo-ob-dokument:only-child .mo-ob-dokument-pregled img { object-fit: contain; }
.mo-ob-ikona { display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--mo-text-muted); }
.mo-ob-dokument-dno { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 12px; border-top: 1px solid var(--mo-border); }
.mo-ob-dokument-naziv { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mo-text); }
.mo-ob-dokument-dno a { color: var(--mo-text-muted); } .mo-ob-dokument-dno a:hover { color: var(--mo-primary); }
.mo-ob-upozorenje { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--mo-radius-md); background: var(--mo-warning-bg); color: var(--mo-text); }
.mo-ob-upozorenje > i { color: var(--mo-warning); font-size: 18px; margin-top: 2px; }
.mo-ob-upozorenje ul { margin: 6px 0 0; padding-left: 18px; }
.mo-ob-upitnik { max-height: 260px; overflow-y: auto; padding: 10px 12px; border-radius: var(--mo-radius-md); background: var(--mo-bg); font-size: 13px; }
.mo-ob-upitnik p { margin: 0; }
@media (max-width: 767px) {
    .mo-ob-dl { grid-template-columns: 95px 1fr; }
    .mo-ob-dokumenti .mo-ob-dokument:only-child .mo-ob-dokument-pregled { height: 260px; }
    .mo-ob-akcije .btn { flex: 1 1 auto; }
}