/* VHP brand overlay on top of Bootstrap 4.6 + SB Admin 2.
   Reads exclusively from tokens.css custom properties. Targets stock
   Bootstrap/SB-Admin class names only — never renames or removes them, so
   jQuery widgets (DataTables, jquery-ui datepicker, ASPSnippets pager,
   sb-admin-2.js collapse) keep working. */

/* ---- Global ---- */
body {
    font-family: var(--vhp-font-family);
    color: var(--vhp-color-text);
    background-color: var(--vhp-color-surface-alt);
}

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

a:hover,
a:focus {
    color: var(--vhp-color-primary-700);
}

/* ---- Primary surfaces (sidebar + buttons + accents) ---- */
.bg-primary {
    background-color: var(--vhp-color-primary) !important;
}

.bg-gradient-primary {
    background-color: var(--vhp-color-primary) !important;
    background-image: linear-gradient(180deg, var(--vhp-color-sidebar-from) 0%, var(--vhp-color-sidebar-to) 100%) !important;
}

.text-primary {
    color: var(--vhp-color-primary) !important;
}

.border-primary {
    border-color: var(--vhp-color-primary) !important;
}

.border-left-primary {
    border-left-color: var(--vhp-color-primary) !important;
}

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

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

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: var(--vhp-focus-ring);
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--vhp-color-primary-700);
    border-color: var(--vhp-color-primary-700);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--vhp-color-primary);
    border-color: var(--vhp-color-primary);
}

.btn-outline-primary {
    color: var(--vhp-color-primary);
    border-color: var(--vhp-color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--vhp-color-primary);
    border-color: var(--vhp-color-primary);
    color: var(--vhp-color-text-inverse);
}

/* ---- Info / accent (used for help text + the cyan accent strip) ---- */
.bg-info {
    background-color: var(--vhp-color-accent) !important;
}

.text-info {
    color: var(--vhp-color-accent) !important;
}

.btn-info {
    background-color: var(--vhp-color-accent);
    border-color: var(--vhp-color-accent);
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--vhp-color-accent-700);
    border-color: var(--vhp-color-accent-700);
}

/* ---- Sidebar tweaks (SB Admin 2 .sidebar-dark variant) ----
   The dark sidebar text colors already work on any deep blue, so we only
   tighten brand-specific spots: brand block contrast and the section heading
   weight. Class names left untouched — sb-admin-2.js drives accordion state. */
.sidebar.sidebar-dark .sidebar-brand {
    color: var(--vhp-color-text-inverse);
    letter-spacing: 0.02em;
    padding: 0.75rem;
    height: auto;
    min-height: 6.5rem;
}

/* The PNG logo already contains the full "VODOVOD HRVATSKO PRIMORJE" wordmark,
   so the sidebar-brand-text is omitted in markup. Scale the image to fill the
   brand block on the expanded sidebar; shrink to just the drop when collapsed. */
.sidebar .sidebar-brand .sidebar-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.sidebar .sidebar-brand .sidebar-brand-icon img {
    width: 100%;
    max-width: 11rem;
    height: auto;
}

.sidebar.toggled .sidebar-brand .sidebar-brand-icon img {
    width: 2.25rem;
    max-width: 2.25rem;
}

.sidebar.sidebar-dark .sidebar-heading {
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--vhp-font-weight-bold);
    letter-spacing: 0.05em;
}

.sidebar.sidebar-dark hr.sidebar-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* ---- Topbar ---- */
.navbar.topbar {
    border-bottom: 1px solid var(--vhp-color-border);
    box-shadow: var(--vhp-shadow-sm) !important;
}

.navbar.topbar .topbar-user {
    gap: 0.75rem;
}

.navbar.topbar .topbar-user .nav-item {
    display: flex;
    align-items: center;
}

.navbar.topbar .topbar-user .topbar-divider {
    width: 1px;
    height: 1.5rem;
    background-color: var(--vhp-color-border);
}

.navbar.topbar .topbar-user .fa-user-circle {
    font-size: 1.25rem;
}

/* ---- Cards ---- */
.card {
    border: 1px solid var(--vhp-color-border);
    border-radius: var(--vhp-radius-md);
    box-shadow: var(--vhp-shadow-sm);
}

.card-header {
    background-color: var(--vhp-color-surface);
    border-bottom: 1px solid var(--vhp-color-border);
}

/* ---- Forms ---- */
.form-control:focus {
    border-color: var(--vhp-color-primary-300);
    box-shadow: var(--vhp-focus-ring);
}

/* ---- Breadcrumb ---- */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--vhp-color-text-muted);
}

.breadcrumb-item a {
    color: var(--vhp-color-primary);
}

.breadcrumb-item.active {
    color: var(--vhp-color-text);
}

/* ---- Cross-vertical banner (P3 partial) ----
   The banner ships as .alert.alert-warning. We layer a brand-blue left border
   in the *opposite-lab* color so the eye can tell at a glance which lab is
   currently being inspected. Per-lab tinting is opt-in via the data-other-lab
   attribute set by the partial. */
.alert.alert-warning[role="status"] {
    background-color: var(--vhp-color-primary-100);
    border-color: var(--vhp-color-primary-300);
    color: var(--vhp-color-text);
    border-left-width: 4px;
    border-radius: var(--vhp-radius-md);
}

.alert.alert-warning[role="status"][data-other-lab="vrelo"] {
    border-left-color: var(--vhp-color-vrelo);
}

.alert.alert-warning[role="status"][data-other-lab="hrmotine"] {
    border-left-color: var(--vhp-color-hrmotine);
}

/* ---- Secondary button family (token-driven, full state set) ---- */
.btn-secondary {
    background-color: var(--vhp-color-text-muted);
    border-color: var(--vhp-color-text-muted);
    color: var(--vhp-color-text-inverse);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
    background-color: var(--vhp-color-text);
    border-color: var(--vhp-color-text);
    color: var(--vhp-color-text-inverse);
}

.btn-outline-secondary {
    color: var(--vhp-color-text-muted);
    border-color: var(--vhp-color-border);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--vhp-color-surface-alt);
    border-color: var(--vhp-color-text-muted);
    color: var(--vhp-color-text);
}

/* ---- Semantic button families (success / warning / danger) ---- */
.btn-success {
    background-color: var(--vhp-color-success);
    border-color: var(--vhp-color-success);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: color-mix(in srgb, var(--vhp-color-success) 88%, black);
    border-color: color-mix(in srgb, var(--vhp-color-success) 88%, black);
}

.btn-warning {
    background-color: var(--vhp-color-warning);
    border-color: var(--vhp-color-warning);
    color: var(--vhp-color-text-inverse);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: color-mix(in srgb, var(--vhp-color-warning) 88%, black);
    border-color: color-mix(in srgb, var(--vhp-color-warning) 88%, black);
    color: var(--vhp-color-text-inverse);
}

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

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: color-mix(in srgb, var(--vhp-color-danger) 88%, black);
    border-color: color-mix(in srgb, var(--vhp-color-danger) 88%, black);
}

.btn-link {
    color: var(--vhp-color-primary);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--vhp-color-primary-700);
    text-decoration: underline;
}

/* ---- Badges (token-driven, semantic) ---- */
.badge {
    font-weight: var(--vhp-font-weight-medium);
    letter-spacing: 0.02em;
}

.badge-primary {
    background-color: var(--vhp-color-primary);
    color: var(--vhp-color-text-inverse);
}

.badge-secondary {
    background-color: var(--vhp-color-text-muted);
    color: var(--vhp-color-text-inverse);
}

.badge-light {
    background-color: var(--vhp-color-surface-alt);
    color: var(--vhp-color-text);
}

.badge-success {
    background-color: var(--vhp-color-success);
    color: var(--vhp-color-text-inverse);
}

.badge-warning {
    background-color: var(--vhp-color-warning);
    color: var(--vhp-color-text-inverse);
}

.badge-danger {
    background-color: var(--vhp-color-danger);
    color: var(--vhp-color-text-inverse);
}

.badge-info {
    background-color: var(--vhp-color-accent);
    color: var(--vhp-color-text-inverse);
}

/* ---- Tables ---- */
.table {
    color: var(--vhp-color-text);
    border-color: var(--vhp-color-border);
}

.table thead th {
    border-bottom: 2px solid var(--vhp-color-border);
    color: var(--vhp-color-text-muted);
    font-weight: var(--vhp-font-weight-bold);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.table thead.thead-light th,
.table .thead-light th {
    background-color: var(--vhp-color-surface-alt);
    color: var(--vhp-color-text-muted);
}

.table td,
.table th {
    border-top-color: var(--vhp-color-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--vhp-color-surface-alt);
}

.table-hover > tbody > tr:hover {
    background-color: var(--vhp-color-primary-100);
    color: var(--vhp-color-text);
}

/* ---- Forms (validation + labels) ---- */
label,
.col-form-label {
    color: var(--vhp-color-text);
    font-weight: var(--vhp-font-weight-medium);
}

.form-control {
    border-color: var(--vhp-color-border);
    color: var(--vhp-color-text);
}

.form-control::placeholder {
    color: var(--vhp-color-text-muted);
    opacity: 0.7;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--vhp-color-danger);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--vhp-color-danger);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--vhp-color-danger) 25%, transparent);
}

.invalid-feedback,
.text-danger {
    color: var(--vhp-color-danger) !important;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--vhp-color-success);
}

.valid-feedback {
    color: var(--vhp-color-success);
}

/* ---- Alerts (semantic variants — the [role="status"] override above
       wins for the cross-vertical banner via specificity) ---- */
.alert {
    border-radius: var(--vhp-radius-md);
    border-width: 1px;
}

.alert-success {
    background-color: color-mix(in srgb, var(--vhp-color-success) 12%, white);
    border-color: color-mix(in srgb, var(--vhp-color-success) 35%, white);
    color: color-mix(in srgb, var(--vhp-color-success) 70%, black);
}

.alert-info {
    background-color: color-mix(in srgb, var(--vhp-color-accent) 12%, white);
    border-color: color-mix(in srgb, var(--vhp-color-accent) 35%, white);
    color: color-mix(in srgb, var(--vhp-color-accent) 70%, black);
}

.alert-warning {
    background-color: color-mix(in srgb, var(--vhp-color-warning) 12%, white);
    border-color: color-mix(in srgb, var(--vhp-color-warning) 35%, white);
    color: color-mix(in srgb, var(--vhp-color-warning) 75%, black);
}

.alert-danger {
    background-color: color-mix(in srgb, var(--vhp-color-danger) 12%, white);
    border-color: color-mix(in srgb, var(--vhp-color-danger) 35%, white);
    color: color-mix(in srgb, var(--vhp-color-danger) 70%, black);
}

/* ---- Border-left semantic utilities ----
   SB Admin 2 hard-codes its swatch (#858796/#1cc88a/#f6c23e/#36b9cc/#e74a3b)
   in the .border-left-* utilities with !important. Rebind to brand tokens so
   the 4-tile accent strips, the cross-vertical banner, and any future
   "border-left-X" usage all read from tokens.css. !important is required
   here to win over the SB-Admin shorthand, which itself uses !important.
   .border-left-primary lives in the "Primary surfaces" section above. */
.border-left-secondary {
    border-left-color: var(--vhp-color-text-muted) !important;
}

.border-left-success {
    border-left-color: var(--vhp-color-success) !important;
}

.border-left-warning {
    border-left-color: var(--vhp-color-warning) !important;
}

.border-left-info {
    border-left-color: var(--vhp-color-info) !important;
}

.border-left-danger {
    border-left-color: var(--vhp-color-danger) !important;
}

/* ---- Sidebar active accent stripe ----
   SB Admin 2's .nav-item.active styles only background; layer a 3px left
   stripe in the cyan accent so the active section pops against the deep
   blue gradient. Applied to both leaf items and collapsible parents. */
.sidebar .nav-item.active > .nav-link {
    box-shadow: inset 3px 0 0 var(--vhp-color-accent);
}

/* ---- Read-only chip ----
   Replaces the inline-styled <span class="badge badge-light/secondary"
   style="font-size:0.55rem">R</span> idiom used in sidebar nav nodes,
   dashboard secondary tiles, and dashboard recent-activity rows. The chip
   carries an fa-eye icon so the meaning ("samo za čitanje") reads at a
   glance without depending on the title tooltip.
   Two surfaces by context:
     - On light surfaces (dashboard, breadcrumb area): primary-100 background
       with a primary-300 border + brand-blue text.
     - Inside the dark sidebar: translucent white. */
.chip-readonly {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--vhp-radius-pill);
    font-size: 0.7rem;
    font-weight: var(--vhp-font-weight-medium);
    line-height: 1.1;
    background-color: var(--vhp-color-primary-100);
    color: var(--vhp-color-primary-700);
    border: 1px solid color-mix(in srgb, var(--vhp-color-primary-300) 40%, transparent);
    vertical-align: middle;
    white-space: nowrap;
}

.chip-readonly i,
.chip-readonly .fas {
    font-size: 0.65rem;
}

.sidebar .chip-readonly {
    background-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.18);
}

.sidebar .collapse-inner .chip-readonly {
    background-color: var(--vhp-color-primary-100);
    color: var(--vhp-color-primary-700);
    border-color: color-mix(in srgb, var(--vhp-color-primary-300) 40%, transparent);
}

/* ---- Sortable table-header links (Ispitivanja Index family) ----
   The Index pages use <a href="javascript:;"> inside <th> cells for click-to-sort.
   Default <a> color from the global anchor rule above would render these as brand
   blue, which fights with the muted P5 .table thead th look. Demote the link to
   header text color and let hover/focus brighten + underline. */
.table thead th a,
.table thead th a:visited {
    color: var(--vhp-color-text-muted);
    text-decoration: none;
    cursor: pointer;
}

.table thead th a:hover,
.table thead th a:focus {
    color: var(--vhp-color-text);
    text-decoration: underline;
}

/* ---- Legacy ASPSnippets pager (Ispitivanja Index family) ----
   The plugin renders two children inside <div class="Pager">:
   .Pager-summary (record range label) and .Pager-pages (nav buttons). They
   sit on opposite ends of the row on wide viewports and stack centered on
   narrow ones. */
.Pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 1rem 0;
}

.Pager:empty {
    margin: 0;
}

.Pager-summary {
    color: var(--vhp-color-text-muted);
    font-size: 0.85rem;
    font-weight: var(--vhp-font-weight-medium);
}

.Pager-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.Pager-pages span,
.Pager-pages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--vhp-radius-md);
    font-size: 0.85rem;
    font-weight: var(--vhp-font-weight-medium);
    line-height: 1.2;
    border: 1px solid var(--vhp-color-border);
    text-decoration: none;
}

.Pager-pages span {
    background-color: var(--vhp-color-primary);
    color: var(--vhp-color-text-inverse);
    border-color: var(--vhp-color-primary);
}

.Pager-pages a {
    background-color: var(--vhp-color-surface);
    color: var(--vhp-color-primary);
}

.Pager-pages a:hover,
.Pager-pages a:focus {
    background-color: var(--vhp-color-primary-100);
    border-color: var(--vhp-color-primary-300);
    color: var(--vhp-color-primary-700);
}

@media (max-width: 575.98px) {
    .Pager {
        justify-content: center;
        text-align: center;
    }

    .Pager-pages {
        justify-content: center;
    }
}

/* ---- Misc utility tweaks ---- */
.sticky-footer {
    border-top: 1px solid var(--vhp-color-border);
    color: var(--vhp-color-text-muted);
}