@media (max-width: 1599px) {
    :root { --sidebar-width: 238px; --content-max: 1540px; }
    .page-container { padding-inline: 20px; }
    .brand-copy strong { font-size: 18px; }
    .kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .device-hub-grid, .device-actions-grid, .phase4c-device-actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filter-grid-devices > label, .filter-grid-monitoring > label { grid-column: span 3; }
    .filter-grid-devices .filter-search, .filter-grid-monitoring .filter-search { grid-column: span 6; }
    .filter-grid-rollout {
        grid-template-columns:
            minmax(240px, 1.7fr)
            minmax(130px, 1fr)
            minmax(130px, 1fr)
            minmax(130px, 1fr)
            minmax(130px, .9fr)
            200px;
    }
    .filter-grid-rollout > label,
    .filter-grid-rollout .filter-actions,
    .filter-grid-rollout .filter-search { grid-column: auto; }
}

@media (max-width: 1366px) {
    :root { --sidebar-width: 220px; --header-height: 78px; }
    .app-sidebar { padding: 14px 10px 12px; }
    .nav-item { min-height: 39px; gap: 10px; padding-inline: 9px; font-size: 12px; }
    .nav-icon { width: 19px; height: 19px; flex-basis: 19px; }
    .page-container { padding: 14px 16px 28px; }
    .page-header { margin-bottom: 11px; }
    .page-heading h1 { font-size: 28px; }
    .header-user-button { min-width: 185px; }
    .kpi-card { min-height: 102px; padding: 12px 13px; }
    .kpi-value { font-size: 25px; }
    .dashboard-state-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr); }
    .system-state-card { grid-template-columns: 150px minmax(0,1fr); gap: 15px; }
    .health-donut, .health-ring-chart { width: 116px; height: 116px; }
    .computers-layout { grid-template-columns: minmax(0,1fr) 290px; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .rollout-workspace { grid-template-columns: minmax(0,1fr) 340px; }
    .form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1180px) {
    .dashboard-state-grid, .computers-layout, .alerts-layout, .rollout-workspace, .config-shell,
    .history-overview-grid, .heartbeat-summary, .performance-upper-grid, .performance-lower-grid,
    .network-overview-grid, .update-layout, .admin-security-grid { grid-template-columns: 1fr; }
    .computer-preview, .alerts-detail, .rollout-confirm-panel, .config-sidebar { position: static; }
    .kpi-grid, .kpi-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .system-state-card { grid-template-columns: 150px minmax(0, 1fr); }
    .pagination-bar { grid-template-columns: 1fr; }
    .pagination-summary, .pagination-links { justify-content: flex-start; }
    .filter-bar, .compact-filter-bar, .admin-audit-filter { grid-template-columns: minmax(200px, 1fr) minmax(120px, auto) auto auto; }
    .network-route-professional {
        grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr);
        gap: 5px;
    }
    .network-route-node {
        padding-inline: 7px;
    }
    .network-route-icon {
        width: 43px;
        height: 43px;
    }
    .enrollment-create-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .app-shell { display: block; }
    .app-sidebar { position: fixed; left: 0; top: 0; z-index: var(--z-sidebar); width: min(86vw, 310px); transform: translateX(-103%); box-shadow: 20px 0 50px rgba(0,0,0,.38); }
    .app-sidebar.is-open { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); display: block; background: rgba(2, 8, 15, .74); border: 0; backdrop-filter: blur(3px); }
    .sidebar-backdrop[hidden] { display: none; }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-collapsed .app-sidebar { padding-inline: 14px; }
    body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .nav-item > span:last-child, body.sidebar-collapsed .sidebar-footer { display: initial; }
    body.sidebar-collapsed .brand { justify-content: flex-start; padding-inline: 8px; }
    body.sidebar-collapsed .nav-item { justify-content: flex-start; padding-inline: 11px; }
    .page-container { padding: 12px 12px 78px; }
    .page-header { min-height: 70px; grid-template-columns: auto minmax(0, 1fr) auto; }
    .header-user { display: none; }
    .mobile-bottom-nav { position: fixed; right: 10px; bottom: 10px; left: 10px; z-index: 45; display: grid; grid-template-columns: repeat(4, 1fr); padding: 5px; background: rgba(10, 32, 57, .95); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(14px); }

    .mobile-bottom-nav a, .mobile-bottom-nav button { min-height: 50px; display: grid; place-items: center; gap: 1px; color: var(--body); background: transparent; border: 0; border-radius: 9px; }
    .mobile-bottom-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .mobile-bottom-nav .is-active { color: #fff; background: var(--active-gradient); }
    .filter-grid > label, .filter-grid .filter-search, .filter-grid-tokens > label:not(.filter-search),
    .filter-grid-audit > label:not(.filter-search), .filter-grid-actions > label:not(.filter-search),
    .filter-grid-alerts > label:not(.filter-search) { grid-column: span 6; }
    .enrollment-create-form, .form-grid, .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fact-span-3 { grid-column: span 1; }
    .registration-steps, .wizard-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .two-column { grid-template-columns: 1fr; }
    .screen-permission-grid { grid-template-columns: 1fr; }
    .device-tabs { position: static; }
}

@media (max-width: 720px) {
    .page-header { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .page-actions { grid-column: 2; grid-row: 1; }
    .page-heading { grid-column: 1 / -1; grid-row: 2; }
    .page-heading h1 { font-size: 25px; }
    .page-subtitle { font-size: 12px; }
    .kpi-grid, .kpi-grid-5, .kpi-grid-6 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .kpi-card { min-height: 96px; padding: 11px 12px; }
    .kpi-value { font-size: 23px; }
    .dashboard-state-grid, .system-state-card { grid-template-columns: 1fr; }
    .system-state-card { text-align: left; }
    .health-donut-block { justify-items: start; }
    .health-ring-legend { max-width: 180px; }
    .filter-grid > label, .filter-grid .filter-search, .filter-grid-tokens > label:not(.filter-search),
    .filter-grid-audit > label:not(.filter-search), .filter-grid-actions > label:not(.filter-search),
    .filter-grid-alerts > label:not(.filter-search) { grid-column: 1 / -1; }
    .filter-actions { justify-content: stretch; }
    .filter-actions .button { flex: 1; }
    .filter-bar, .compact-filter-bar, .admin-audit-filter, .period-toolbar { grid-template-columns: 1fr; }
    .filter-bar .button, .compact-filter-bar .button, .admin-audit-filter .button, .period-toolbar .button { width: 100%; }
    .panel, .card { padding: 12px; }
    .panel-header { align-items: stretch; }
    .panel-header .button, .compact-sort-form { width: 100%; }
    .compact-sort-form label { width: 100%; min-width: 0; }
    .pagination-links { justify-content: center; flex-wrap: wrap; }
    .pagination-link { flex: 1 1 auto; min-width: 78px; }
    .pagination-edge { display: inline-flex; }
    .pagination-pages { order: 3; width: 100%; justify-content: center; }
    .pagination-summary { justify-content: space-between; }
    .pagination-size-form label { justify-content: space-between; }
    .device-hub-grid, .device-actions-grid, .phase4c-device-actions-grid, .metric-grid,
    .enrollment-create-form, .form-grid, .facts-grid { grid-template-columns: 1fr; }
    .device-action-card-wide, .fact-span-2, .fact-span-3, .fact-span-4, .form-span-2 { grid-column: span 1; }
    .device-health-banner, .network-health-banner, .service-health-banner, .update-warning-banner,
    .device-action-guard, .safe-actions-banner, .password-reset-box { align-items: stretch; flex-direction: column; }
    .device-health-now { min-width: 0; width: 100%; padding: 11px 0 0; border-top: 1px solid var(--border); border-left: 0; }
    .token-result, .one-time-secret, .config-summary, .config-inline-form { grid-template-columns: 1fr; }
    .inline-reset-form { width: 100%; min-width: 0; flex-direction: column; }
    .screen-permission-row { grid-template-columns: 1fr auto auto; }
    .registration-steps, .wizard-steps { grid-template-columns: 1fr; }
    .network-route-professional {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 12px 0 6px;
    }
    .network-route-professional::before {
        inset: 0;
    }
    .network-route-node {
        width: 100%;
        min-height: 112px;
        grid-template-columns: 46px minmax(0, 1fr);
    }
    .network-route-connector {
        width: 34px;
        min-height: 50px;
        grid-template-columns: 1fr;
        justify-self: center;
    }
    .network-route-connector-label {
        top: 50%;
        left: 42px;
        transform: translateY(-50%);
    }
    .network-route-line {
        width: 3px;
        height: 50px;
        justify-self: center;
        background: linear-gradient(180deg, rgba(75, 156, 255, .20), var(--cyan), rgba(54, 212, 208, .28));
    }
    .network-route-line::after {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .network-route-connector svg {
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
    .rollout-confirm-panel dl.release-metadata { grid-template-columns: 1fr; }
    .rollout-confirm-panel dl.release-metadata > .release-metadata-wide { grid-column: auto; }
    .history-live-meta, .history-filter-actions { justify-content: stretch; }
    .history-range-button { flex: 1; }
    .disk-summary-row { grid-template-columns: 1fr; }
    .auth-shell, .login-shell { padding: 22px 18px; }
    .auth-theme-toggle { top: 12px; right: 12px; }
}

@media (max-width: 430px) {
    .page-container { padding-inline: 9px; }
    .page-actions { gap: 6px; }
    .icon-button, .sidebar-toggle-button { width: 40px; height: 40px; }
    .kpi-grid, .kpi-grid-5, .kpi-grid-6 { grid-template-columns: 1fr; }
    .kpi-card { min-height: 91px; }
    .pagination-summary { display: grid; gap: 4px; }
    .pagination-link { padding-inline: 6px; font-size: 10px; }
    .mobile-bottom-nav { right: 6px; bottom: 6px; left: 6px; }
    .mobile-bottom-nav small { font-size: 9px; }
    .event-timeline li { grid-template-columns: auto minmax(0,1fr); }
    .event-timeline time { grid-column: 2; }
}

@media (max-width: 980px) {
    .device-hero { align-items: stretch; flex-direction: column; }
    .device-hero-actions { justify-content: stretch; }
    .device-hero-actions .button { flex: 1; }
}

@media (max-width: 720px) {
    .device-hero-main { align-items: flex-start; }
    .device-hero-actions { flex-direction: column; }
    .device-hero-actions .button { width: 100%; }
    .device-hero-copy p { line-height: 1.55; }
}


/* FIX 05 - responsive Sažetak pojedinačnog računara */
@media (max-width: 1180px) {
    .device-summary-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .device-summary-health-card {
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: start;
    }

    .device-summary-health-card > .status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .device-summary-hub-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .device-summary-kpi-grid { grid-template-columns: 1fr; }
    .device-summary-health-card { grid-template-columns: 1fr; }
    .device-summary-health-icon { width: 40px; height: 40px; }
}


/* FIX 06 - responsive profesionalni grafikon */
@media (max-width: 1180px) {
    .performance-chart-stage {
        min-height: 250px;
    }
}

@media (max-width: 720px) {
    .performance-chart-stage {
        min-height: 230px;
        aspect-ratio: 16 / 9;
    }

    .performance-chart-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .performance-chart-period {
        white-space: normal;
    }
}

@media (max-width: 430px) {
    .performance-chart-stage {
        min-height: 210px;
    }

    .performance-chart-tooltip {
        min-width: 156px;
        padding: 8px 9px;
    }

    .performance-legend-item {
        grid-template-columns: 18px auto auto;
    }

    .performance-legend-item i {
        width: 18px;
    }
}


@media (max-width: 430px) {
    .network-route-node {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 13px 11px;
    }

    .network-route-icon {
        width: 40px;
        height: 40px;
    }

    .network-route-copy strong {
        font-size: 14px;
    }

    .network-route-footer {
        justify-content: flex-start;
    }
}


/* FIX 08B - Putanja se prilagođava stvarnoj širini panela. */
@container network-route (max-width: 720px) {
    .network-route-professional {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 12px 0 6px;
    }

    .network-route-professional::before {
        inset: 0;
    }

    .network-route-node {
        width: 100%;
        min-height: 112px;
        grid-template-columns: 46px minmax(0, 1fr);
        justify-items: stretch;
        gap: 10px;
        padding: 14px 13px;
        text-align: left;
    }

    .network-route-copy {
        justify-items: start;
    }

    .network-route-copy strong {
        font-size: 15px;
    }

    .network-route-copy code {
        font-size: 11px;
    }

    .network-route-connector {
        width: 34px;
        min-height: 50px;
        grid-template-columns: 1fr;
        justify-self: center;
    }

    .network-route-connector-label {
        top: 50%;
        left: 42px;
        transform: translateY(-50%);
    }

    .network-route-line {
        width: 3px;
        height: 50px;
        justify-self: center;
        background: linear-gradient(
            180deg,
            rgba(75, 156, 255, .20),
            var(--cyan),
            rgba(54, 212, 208, .28)
        );
    }

    .network-route-line::after {
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .network-route-connector svg {
        position: absolute;
        bottom: -2px;
        left: 50%;
        transform: translateX(-50%) rotate(90deg);
    }
}


/* FIX 09 - responsive DNS/Gateway blok */
@media (max-width: 430px) {
    .network-address-summary-header {
        align-items: flex-start;
    }

    .network-address-card {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .network-address-card > .status {
        grid-column: 1 / -1;
        justify-self: start;
    }
}


/* FIX 10 - responsive services attention banner */
@media (max-width: 760px) {
    .service-health-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .service-health-meta {
        min-width: 0;
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid var(--border);
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .service-health-banner-main {
        grid-template-columns: 1fr;
    }

    .service-health-icon {
        width: 42px;
        height: 42px;
    }
}


/* FIX 11 - responsive update banner */
@media (max-width: 760px) {
    .update-warning-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .update-health-side {
        min-width: 0;
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid var(--border);
        justify-items: start;
    }
}

@media (max-width: 480px) {
    .update-health-main {
        grid-template-columns: 1fr;
    }

    .update-health-icon {
        width: 50px;
        height: 50px;
    }
}


/* FIX 12 - responsive configuration cards */
@media (max-width: 1200px) {
    .config-entry-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .config-entry-side {
        padding-left: 0;
        padding-top: 12px;
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 900px) {
    .config-shell {
        grid-template-columns: 1fr;
    }

    .config-sidebar {
        position: static;
    }

    .config-section-header {
        flex-direction: column;
    }

    .config-section-header-meta {
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 560px) {
    .config-content {
        padding: 10px;
    }

    .config-entry-card {
        padding: 12px;
    }

    .config-entry-topline {
        align-items: start;
    }
}


/* FIX 13 - responsive heartbeat and embedded pagination */
@media (max-width: 760px) {
    .heartbeat-ecg-toolbar {
        flex-direction: column;
    }

    .heartbeat-ecg-toolbar small {
        text-align: left;
    }

    .heartbeat-ecg-stage {
        height: 165px;
    }

    .heartbeat-ecg-legend {
        grid-template-columns: 1fr;
    }
}

/* FIX 13B - responsive history upper section */
@media (max-width: 1180px) {
    .history-toolbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .history-toolbar-controls {
        justify-content: space-between;
    }

    .history-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .history-toolbar-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .history-range-switch {
        width: 100%;
    }

    .history-live-meta {
        width: 100%;
        justify-content: flex-start;
    }

    .history-time-zone {
        margin-left: auto;
    }

    .heartbeat-ecg-toolbar {
        align-items: flex-start;
    }

    .heartbeat-ecg-guide {
        justify-content: flex-start;
    }

    .history-alert-item {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .history-alert-item > .status {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 480px) {
    .history-toolbar {
        padding: 11px;
    }

    .history-live-meta {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .history-live-label {
        grid-column: 1 / -1;
    }

    .history-time-zone {
        grid-column: 1 / -1;
        margin-left: 0;
    }

    .history-refresh-button {
        justify-self: end;
    }

    .heartbeat-ecg-stage {
        height: 138px;
    }

    .heartbeat-ecg-guide {
        display: none;
    }

    .heartbeat-ecg-legend {
        grid-template-columns: 1fr;
    }
}


/* FIX 15B - responsive enrollment layout, bez promjene standardnih kontrola. */
@media (max-width: 1120px) {
    .enrollment-token-create-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .enrollment-token-create-row .enrollment-create-action {
        grid-column: 4;
    }

    .enrollment-token-filter-row {
        grid-template-columns:
            minmax(250px, 1.4fr)
            minmax(145px, .7fr)
            minmax(195px, .9fr)
            auto;
    }
}

@media (max-width: 900px) {
    .enrollment-token-create-row,
    .enrollment-token-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enrollment-token-create-row .enrollment-create-action,
    .enrollment-token-filter-row .filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 620px) {
    .enrollment-token-create-row,
    .enrollment-token-filter-row {
        grid-template-columns: 1fr;
    }

    .enrollment-token-create-row .enrollment-create-action,
    .enrollment-token-filter-row .filter-actions {
        grid-column: auto;
    }

    .enrollment-token-create-row .enrollment-create-action .button,
    .enrollment-token-filter-row .filter-actions .button {
        flex: 1;
    }
}



/* FIX 16 - responsive Monitoring filter grid, bez promjene kontrola. */
@media (max-width: 1050px) {
    .filter-grid-monitoring {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .filter-grid-monitoring .filter-search {
        grid-column: span 6;
    }

    .filter-grid-monitoring .filter-search + label,
    .filter-grid-monitoring .filter-search + label + label,
    .filter-grid-monitoring .filter-search + label + label + label,
    .filter-grid-monitoring .filter-search + label + label + label + label,
    .filter-grid-monitoring .filter-search + label + label + label + label + label,
    .filter-grid-monitoring .filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .filter-grid-monitoring {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-grid-monitoring .filter-search {
        grid-column: 1 / -1;
    }

    .filter-grid-monitoring .filter-search + label,
    .filter-grid-monitoring .filter-search + label + label,
    .filter-grid-monitoring .filter-search + label + label + label,
    .filter-grid-monitoring .filter-search + label + label + label + label,
    .filter-grid-monitoring .filter-search + label + label + label + label + label {
        grid-column: span 1;
    }

    .filter-grid-monitoring .filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .filter-grid-monitoring {
        grid-template-columns: 1fr;
    }

    .filter-grid-monitoring .filter-search,
    .filter-grid-monitoring .filter-search + label,
    .filter-grid-monitoring .filter-search + label + label,
    .filter-grid-monitoring .filter-search + label + label + label,
    .filter-grid-monitoring .filter-search + label + label + label + label,
    .filter-grid-monitoring .filter-search + label + label + label + label + label,
    .filter-grid-monitoring .filter-actions {
        grid-column: auto;
    }
}


/* FIX 17 - responsive Rollout, bez promjene standardnih kontrola. */
@media (max-width: 1550px) {
    .filter-grid-rollout {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .filter-grid-rollout .filter-search {
        grid-column: span 3;
    }

    .filter-grid-rollout > label:not(.filter-search) {
        grid-column: span 1;
    }

    .filter-grid-rollout .filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 1250px) {
    .rollout-stepper {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rollout-stepper::before {
        display: none;
    }

    .filter-grid-rollout {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .filter-grid-rollout .filter-search {
        grid-column: span 2;
    }

    .filter-grid-rollout > label:not(.filter-search) {
        grid-column: span 1;
    }

    .filter-grid-rollout .filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 820px) {
    .rollout-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-grid-rollout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-grid-rollout .filter-search,
    .filter-grid-rollout .filter-actions {
        grid-column: 1 / -1;
    }

    .filter-grid-rollout > label:not(.filter-search) {
        grid-column: span 1;
    }
}

@media (max-width: 560px) {
    .rollout-stepper,
    .filter-grid-rollout,
    .filter-grid-jobs {
        grid-template-columns: 1fr;
    }

    .filter-grid-rollout .filter-search,
    .filter-grid-rollout > label:not(.filter-search),
    .filter-grid-rollout .filter-actions {
        grid-column: auto;
    }

    .rollout-stepper li {
        min-height: 64px;
    }
}


/* FIX 17B - responsive Rollout workspace order. */
@media (max-width: 1180px) {
    .rollout-workspace {
        grid-template-columns: 1fr;
        grid-template-areas:
            "devices"
            "confirmation"
            "history";
    }
}

@media (max-width: 620px) {
    .rollout-history .filter-grid-jobs {
        grid-template-columns: 1fr;
    }

    .rollout-history .filter-grid-jobs .filter-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* FIX 17D - Rollout pager na užim širinama ostaje unutar kartice. */
@media (max-width: 760px) {
    .rollout-devices-panel > .pagination-bar,
    .rollout-history > .pagination-bar {
        grid-template-columns: 1fr;
    }

    .rollout-devices-panel > .pagination-bar .pagination-size-form,
    .rollout-devices-panel > .pagination-bar .pagination-summary,
    .rollout-devices-panel > .pagination-bar .pagination-links,
    .rollout-history > .pagination-bar .pagination-size-form,
    .rollout-history > .pagination-bar .pagination-summary,
    .rollout-history > .pagination-bar .pagination-links {
        grid-column: 1;
        justify-self: stretch;
    }

    .rollout-devices-panel > .pagination-bar .pagination-summary,
    .rollout-history > .pagination-bar .pagination-summary {
        text-align: left;
    }

    .rollout-devices-panel > .pagination-bar .pagination-links,
    .rollout-history > .pagination-bar .pagination-links {
        justify-content: flex-start;
    }
}


/* FIX 19C - responsive Alarm Center. */
@media (max-width: 1280px) {
    .alarm-filter-form {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .alarm-filter-form .filter-search {
        grid-column: span 6;
    }

    .alarm-filter-form .filter-search + label,
    .alarm-filter-form .filter-search + label + label,
    .alarm-filter-form .filter-actions {
        grid-column: span 2;
    }

    .alarm-center-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
    }
}

@media (max-width: 940px) {
    .alarm-filter-form {
        grid-template-columns: 1fr;
    }

    .alarm-filter-form .filter-search,
    .alarm-filter-form .filter-search + label,
    .alarm-filter-form .filter-search + label + label,
    .alarm-filter-form .filter-actions {
        grid-column: 1;
    }

    .alarm-center-workspace {
        grid-template-columns: 1fr;
    }

    .alarm-detail-card {
        position: static;
    }
}

@media (max-width: 680px) {
    .alarm-event-card {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .alarm-event-icon {
        width: 38px;
        height: 38px;
    }

    .alarm-event-card > .status {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .alarm-detail-stats,
    .alarm-technical-key,
    .alarm-detail-actions {
        grid-template-columns: 1fr;
    }

    .alarm-events-panel > .pagination-bar {
        grid-template-columns: 1fr;
    }

    .alarm-events-panel > .pagination-bar .pagination-size-form,
    .alarm-events-panel > .pagination-bar .pagination-summary,
    .alarm-events-panel > .pagination-bar .pagination-links {
        grid-column: 1;
        justify-self: stretch;
    }

    .alarm-events-panel > .pagination-bar .pagination-summary {
        text-align: left;
    }

    .alarm-events-panel > .pagination-bar .pagination-links {
        justify-content: flex-start;
    }
}


/* FIX 21D - responsive Rollout history filter, isti standard kao ostali filteri. */
@media (max-width: 1050px) {
    .rollout-history .filter-grid-jobs {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .rollout-history .filter-grid-jobs .filter-search {
        grid-column: span 3;
    }

    .rollout-history .filter-grid-jobs .filter-search + label {
        grid-column: span 1;
    }

    .rollout-history .filter-grid-jobs .filter-actions {
        grid-column: span 2;
    }
}

@media (max-width: 760px) {
    .rollout-history .filter-grid-jobs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rollout-history .filter-grid-jobs .filter-search {
        grid-column: 1 / -1;
    }

    .rollout-history .filter-grid-jobs .filter-search + label {
        grid-column: span 1;
    }

    .rollout-history .filter-grid-jobs .filter-actions {
        grid-column: span 1;
    }
}

@media (max-width: 520px) {
    .rollout-history .filter-grid-jobs {
        grid-template-columns: 1fr;
    }

    .rollout-history .filter-grid-jobs .filter-search,
    .rollout-history .filter-grid-jobs .filter-search + label,
    .rollout-history .filter-grid-jobs .filter-actions {
        grid-column: auto;
    }
}


/* FIX 17F - ZAVRSNI OVERRIDE: glavni Rollout filter stvarno ostaje u jednoj liniji. */
@media (min-width: 1180px) {
    .rollout-filter-panel .filter-grid-rollout {
        display: grid;
        grid-template-columns:
            minmax(210px, 2.1fr)
            minmax(110px, .9fr)
            minmax(110px, .9fr)
            minmax(110px, .9fr)
            minmax(120px, .95fr)
            minmax(190px, 1.35fr);
        align-items: end;
        gap: 10px;
    }

    .rollout-filter-panel .filter-grid-rollout > label,
    .rollout-filter-panel .filter-grid-rollout .filter-search,
    .rollout-filter-panel .filter-grid-rollout .filter-actions {
        grid-column: auto !important;
        min-width: 0;
        margin: 0;
    }

    .rollout-filter-panel .filter-grid-rollout .filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        gap: 8px;
        padding-top: 0;
    }

    .rollout-filter-panel .filter-grid-rollout .filter-actions .button {
        width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
    }
}


/* FIX 22 - ZAVRŠNI OVERRIDE: Računari filter u jednoj liniji. */
@media (min-width: 1280px) {
    .filter-panel .filter-grid-devices {
        display: grid;
        grid-template-columns:
            minmax(190px, 1.9fr)
            minmax(105px, .9fr)
            minmax(105px, .9fr)
            minmax(95px, .78fr)
            minmax(105px, .88fr)
            minmax(120px, 1fr)
            180px;
        align-items: end;
        gap: 10px;
    }

    .filter-panel .filter-grid-devices > label,
    .filter-panel .filter-grid-devices .filter-search,
    .filter-panel .filter-grid-devices .filter-actions-devices {
        grid-column: auto !important;
        min-width: 0;
        margin: 0;
    }

    .filter-panel .filter-grid-devices .filter-actions-devices {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: end;
        gap: 8px;
        padding-top: 0;
    }

    .filter-panel .filter-grid-devices .filter-actions-devices .button {
        width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
    }
}

@media (max-width: 720px) {
    .devices-list-header .devices-register-action {
        width: 100%;
    }
}


/* FIX 23 - responsive Registracija bez promjene standardnih kontrola. */
@media (max-width: 980px) {
    .enrollment-token-create-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .enrollment-create .panel-header {
        align-items: flex-start;
    }

    .enrollment-create-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .enrollment-token-create-row {
        grid-template-columns: 1fr;
    }
}


/* FIX 25 - ZAVRSNI OVERRIDE: Monitoring filter ostaje u jednoj liniji. */
@media (min-width: 1180px) {
    .filter-grid-monitoring {
        grid-template-columns:
            minmax(220px, 1.8fr)
            repeat(5, minmax(105px, .9fr))
            200px;
        align-items: end;
        gap: 10px 12px;
    }

    .filter-grid-monitoring > label,
    .filter-grid-monitoring .filter-search,
    .filter-grid-monitoring .filter-search + label,
    .filter-grid-monitoring .filter-search + label + label,
    .filter-grid-monitoring .filter-search + label + label + label,
    .filter-grid-monitoring .filter-search + label + label + label + label,
    .filter-grid-monitoring .filter-search + label + label + label + label + label,
    .filter-grid-monitoring .filter-actions {
        grid-column: auto;
        min-width: 0;
    }

    .filter-grid-monitoring .filter-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .filter-grid-monitoring .filter-actions .button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 720px) {
    .nightly-restart-telemetry-list > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
    .nightly-restart-telemetry-list dd {
        text-align: left;
    }
    .nightly-restart-received {
        text-align: left;
    }
}