/*
 * PINMS – Global Stylesheet
 * Wszystkie style modułów trafiają tutaj.
 * NIE dodawaj bloków <style> bezpośrednio do plików .tpl
 * Generated: 2026-05-21
 */


/* ======================================================
 * index.tpl – globalny gorny pasek i powiadomienia
 * ====================================================== */
.pinms-shell-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 42px;
    padding: 0 18px;
    background: #182433;
}
.pinms-shell-topbar-actions { display: flex; align-items: center; min-height: 42px; }
.pinms-shell-topbar .notif-bell-wrap .nav-link { color: #cbd2dc; }
.pinms-shell-topbar .notif-bell-wrap .nav-link:hover,
.pinms-shell-topbar .notif-bell-wrap .nav-link:focus { color: #fff; }
.pinms-shell-topbar .notif-bell-badge { border-color: #182433; }
.notif-bell-wrap .nav-link { color: var(--tblr-body-color); }
.notif-bell-icon { position: relative; display: inline-flex; }
.notif-bell-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 0.62rem;
    font-weight: 600;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    line-height: 17px;
    border-radius: 999px !important;
    border: 2px solid var(--tblr-card-bg, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
}
.notif-dropdown { width: 360px; max-width: 90vw; padding: 0; }
.notif-dropdown #notifList { max-height: 380px; overflow-y: auto; }
.notif-item {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tblr-border-color);
    color: inherit;
    text-decoration: none;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--tblr-bg-surface-secondary, rgba(0,0,0,0.03)); color: inherit; }
.notif-item-unread { background: rgba(32, 107, 196, 0.06); }
.notif-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-title { font-size: 0.85rem; font-weight: 600; }
.notif-item-unread .notif-item-title { font-weight: 700; }
.notif-item-message { font-size: 0.78rem; color: var(--tblr-secondary-color); white-space: normal; }
.notif-item-time { font-size: 0.7rem; color: var(--tblr-secondary-color); }

/* ======================================================
 * e_start_dashboard.tpl – module chips
 * ====================================================== */
.module-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    border: 1.5px solid;
    line-height: 1.4;
}
.module-chip-olt       { color: #1d4ed8; background: #eff6ff; border-color: #93c5fd; }
.module-chip-backup    { color: #065f46; background: #ecfdf5; border-color: #6ee7b7; }
.module-chip-ipam      { color: #3730a3; background: #eef2ff; border-color: #a5b4fc; }
.module-chip-smokeping { color: #0e7490; background: #ecfeff; border-color: #67e8f9; }
.module-chip-pyxis     { color: #5b21b6; background: #f5f3ff; border-color: #c4b5fd; }
.module-chip-n6        { color: #9a3412; background: #fff7ed; border-color: #fdba74; }
.module-chip-vulnscan  { color: #854d0e; background: #fefce8; border-color: #fde047; }
.module-chip-abuseipdb { color: #991b1b; background: #fef2f2; border-color: #fca5a5; }
.module-chip-dude      { color: #166534; background: #f0fdf4; border-color: #86efac; }

/* Hero: tlo z abstrakcyjnym wzorem sieci zamiast zdjecia stockowego */
.dashboard-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 620px 420px at 88% 8%, rgba(96, 165, 250, 0.35), transparent 60%),
        radial-gradient(ellipse 480px 380px at 18% 108%, rgba(37, 99, 235, 0.30), transparent 65%),
        linear-gradient(120deg, #0a1a33 0%, #10254a 40%, #123a72 70%, #1d4ed8 100%);
    background-size: 140% 140%, 140% 140%, 100% 100%;
    background-position: 0% 0%, 0% 0%, 0% 0%;
    animation: heroGlowDrift 22s ease-in-out infinite;
    color: #fff;
    border-radius: var(--tblr-card-border-radius, 4px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.dashboard-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(ellipse 70% 100% at 100% 0%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 100% at 100% 0%, #000 40%, transparent 85%);
}
@keyframes heroGlowDrift {
    0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
    50% { background-position: -8% 6%, 6% -6%, 0% 0%; }
}
@media (prefers-reduced-motion: reduce) {
    .dashboard-hero { animation: none; }
}
.dashboard-hero .card-body { position: relative; z-index: 1; }
.dashboard-hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.dashboard-hero h1, .dashboard-hero .text-secondary { color: #fff !important; }
.dashboard-hero .text-secondary { color: rgba(255,255,255,0.75) !important; }
.dashboard-hero .module-chip { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: #fff; }
.dashboard-hero .module-chip:hover { background: rgba(255,255,255,0.2); }

/* Kafelki statystyk */
.stat-tile { display: flex; align-items: center; gap: 12px; padding: 16px; height: 100%; }
.stat-tile-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-tile-icon-blue   { background: #eff6ff; color: #1d4ed8; }
.stat-tile-icon-indigo { background: #eef2ff; color: #4338ca; }
.stat-tile-icon-green  { background: #ecfdf5; color: #059669; }
.stat-tile-icon-red    { background: #fef2f2; color: #dc2626; }
.stat-tile-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.stat-tile-label { color: var(--tblr-secondary-color); font-size: 0.8rem; }
.stat-tile-trend { font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.stat-tile-trend.up { color: #059669; }
.stat-tile-sparkline { width: 90px; height: 36px; flex-shrink: 0; margin-left: auto; }
.stat-tile-ring-wrap { margin-left: auto; flex-shrink: 0; }

/* Pierscien postepu (SVG) */
.ring-progress { position: relative; width: 56px; height: 56px; }
.ring-progress svg { transform: rotate(-90deg); }
.ring-progress-label {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
}

/* Ostatnie zdarzenia */
.activity-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--tblr-border-color); }
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-item:first-child { padding-top: 0; }
.activity-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.activity-dot-success { background: #2fb344; }
.activity-dot-danger  { background: #d63939; }
.activity-dot-info    { background: #4299e1; }
.activity-title { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.activity-subtitle { font-size: 0.78rem; color: var(--tblr-secondary-color); }
.activity-time { font-size: 0.72rem; color: var(--tblr-secondary-color); white-space: nowrap; }

/* Karta "Wymaga uwagi" (kompaktowa) */
.attention-card { border-left: 3px solid #d63939; cursor: default; }
.attention-card-list { list-style: none; margin: 0; padding: 0; }
.attention-card-list li { margin-bottom: 6px; font-size: 0.82rem; }
.attention-card-list li:last-child { margin-bottom: 0; }
.attention-card-list a { color: inherit; }

/* Siatka modulow (karty z kolorowym lewym obramowaniem) */
.module-grid-card { border-left: 3px solid var(--module-color, #206bc4); height: 100%; }
.module-grid-card .card-body { padding: 16px; }
.module-grid-card-icon { color: var(--module-color, #206bc4); }

/* ======================================================
 * e_admin_list.tpl
 * ====================================================== */

    /* Podstawowe style dla tabeli - ID celowo unikalne (adminTable), zeby nie
       kolidowac z #table1/#table1_wrapper uzywanym przez e_olt_list.tpl (tam
       #table1_wrapper jest chowany na mobile na rzecz osobnych kart .device-mobile-card -
       ta sama regula czyscila by tez tabele administratorow, ktora nie ma takiego zamiennika). */
    #adminTable {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #adminTable td {
        vertical-align: middle;
    }

    /* Przyciski akcji */
    .btn-admin-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-edit-admin {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-admin:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-delete-admin {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-admin:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    /* Style dla wyszukiwania */
    .dataTables_filter {
        margin-bottom: 1rem;
    }

    .dataTables_filter label {
        font-weight: 500;
        color: #495057;
    }

    .dataTables_filter input {
        margin-left: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        transition: border-color 0.15s ease-in-out;
        font-size: 0.9rem;
    }

    .dataTables_filter input:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    /* Style dla paginacji */
    .dataTables_paginate .paginate_button {
        padding: 0.375rem 0.75rem;
        margin: 0 0.125rem;
        border-radius: 0.375rem;
        border: 1px solid #dee2e6;
        color: #495057;
    }

    .dataTables_paginate .paginate_button:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

    .dataTables_paginate .paginate_button.current {
        background-color: #667eea;
        border-color: #667eea;
        color: white;
    }

    /* Style dla info */
    .dataTables_info {
        color: #6c757d;
        font-size: 0.875rem;
        padding-top: 1rem;
    }

    /* Style dla hover efektu */
    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
    }

    .actions-cell {
        white-space: nowrap;
    }

    /* Responsywne style */
    @media screen and (max-width: 768px) {
        .card-body {
            padding: 0.75rem;
        }

        .btn-admin-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }
    }


/* ======================================================
 * e_backups_detect_devices.tpl
 * ====================================================== */

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .form-buttons {
            flex-direction: column !important;
        }

        .form-buttons .btn {
            width: 100%;
        }
    }


/* ======================================================
 * e_backups_device_add.tpl
 * ====================================================== */

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        .form-label {
            font-size: 0.9rem;
        }

        .form-text {
            font-size: 0.8rem;
        }

        .form-buttons {
            flex-direction: column !important;
        }

        .form-buttons .btn {
            width: 100%;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .card-body {
            padding: 0.5rem;
        }

        .mb-3 {
            margin-bottom: 0.75rem !important;
        }
    }


/* ======================================================
 * e_backups_device_edit.tpl
 * ====================================================== */

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        .form-label {
            font-size: 0.9rem;
        }

        .form-text {
            font-size: 0.8rem;
        }

        .form-buttons {
            flex-direction: column !important;
        }

        .form-buttons .btn {
            width: 100%;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .card-body {
            padding: 0.5rem;
        }

        .mb-3 {
            margin-bottom: 0.75rem !important;
        }
    }


/* ======================================================
 * e_backups_device_view.tpl
 * ====================================================== */

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        /* Hide desktop table on mobile */
        .table-desktop {
            display: none;
        }

        .history-mobile-card {
            display: block;
        }

        /* Mobile history card */
        .history-card {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .history-card-header {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .history-card-row {
            display: flex;
            justify-content: space-between;
            padding: 0.25rem 0;
            font-size: 0.85rem;
        }

        .history-card-label {
            font-weight: 500;
            color: #6c757d;
        }

        .history-card-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }

        .history-card-actions .btn {
            flex: 1;
            font-size: 0.8rem;
        }

        .info-row {
            flex-direction: column;
            align-items: flex-start !important;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .history-card {
            padding: 0.5rem;
        }

        .history-card-header {
            font-size: 0.9rem;
        }

        .history-card-row {
            font-size: 0.8rem;
        }

        .history-card-actions .btn {
            font-size: 0.75rem;
        }
    }

    /* Desktop - hide mobile view */
    @media (min-width: 769px) {
        .table-desktop {
            display: table;
        }

        .history-mobile-card {
            display: none;
        }
    }

    /* Status badges */
    .status-success {
        color: #28a745;
        font-weight: bold;
    }

    .status-failed {
        color: #dc3545;
        font-weight: bold;
    }

    .status-enabled {
        background-color: #28a745;
    }

    .status-disabled {
        background-color: #6c757d;
    }

    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e9ecef;
    }

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

    .info-label {
        font-weight: 600;
        color: #495057;
    }

    .info-value {
        color: #212529;
    }


/* ======================================================
 * e_backups_devices.tpl
 * ====================================================== */

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        /* Hide desktop table on mobile */
        .table-desktop {
            display: none;
        }

        #table1_wrapper,
        #portsTable_wrapper {
            display: none;
        }

        .device-mobile-card {
            display: block;
        }

        /* Mobile device card */
        .device-card {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .device-card-header {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .device-card-row {
            display: flex;
            justify-content: space-between;
            padding: 0.25rem 0;
            font-size: 0.85rem;
        }

        .device-card-label {
            font-weight: 500;
            color: #6c757d;
        }

        .device-card-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
            flex-wrap: wrap;
        }

        .device-card-actions .btn,
        .device-card-actions .btn-olt-action {
            flex: 1;
            font-size: 0.8rem;
        }

        .badge {
            font-size: 0.75rem;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .device-card {
            padding: 0.5rem;
        }

        .device-card-header {
            font-size: 0.9rem;
        }

        .device-card-row {
            font-size: 0.8rem;
        }

        .device-card-actions .btn,
        .device-card-actions .btn-olt-action {
            font-size: 0.75rem;
        }
    }

    /* Desktop - hide mobile view */
    @media (min-width: 769px) {
        .table-desktop {
            display: table;
        }

        #table1_wrapper,
        #portsTable_wrapper {
            display: block;
        }

        .device-mobile-card {
            display: none;
        }
    }

    /* Przyciski akcji */
    .btn-backup-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-run-backup {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
    }

    .btn-run-backup:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white !important;
    }

    .btn-edit-backup {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-backup:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-delete-backup {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-backup:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    .actions-cell {
        white-space: nowrap;
    }

    @media screen and (max-width: 768px) {
        .btn-backup-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }
    }

    /* Status badges */
    .status-enabled {
        background-color: #28a745;
    }

    .status-disabled {
        background-color: #6c757d;
    }

    .backup-status-success {
        color: #28a745;
    }

    .backup-status-failed {
        color: #dc3545;
    }

    .backup-status-pending {
        color: #ffc107;
    }


/* ======================================================
 * e_backups_history.tpl
 * ====================================================== */

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        /* Hide desktop table on mobile */
        .table-desktop {
            display: none;
        }

        .history-mobile-card {
            display: block;
        }

        /* Mobile history card */
        .history-card {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .history-card-header {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
        }

        .history-card-row {
            display: flex;
            justify-content: space-between;
            padding: 0.25rem 0;
            font-size: 0.85rem;
        }

        .history-card-label {
            font-weight: 500;
            color: #6c757d;
        }

        .history-card-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }

        .history-card-actions .btn {
            flex: 1;
            font-size: 0.8rem;
        }

        .form-select {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .history-card {
            padding: 0.5rem;
        }

        .history-card-header {
            font-size: 0.9rem;
        }

        .history-card-row {
            font-size: 0.8rem;
        }

        .history-card-actions .btn {
            font-size: 0.75rem;
        }
    }

    /* Desktop - hide mobile view */
    @media (min-width: 769px) {
        .table-desktop {
            display: table;
        }

        .history-mobile-card {
            display: none;
        }
    }

    /* Status badges */
    .status-success {
        color: #28a745;
        font-weight: bold;
    }

    .status-failed {
        color: #dc3545;
        font-weight: bold;
    }


/* ======================================================
 * e_config.tpl
 * ====================================================== */

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        .card-header h3.card-title,
        .card-header h5.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        /* Form buttons - stack vertically on mobile */
        .form-buttons {
            flex-direction: column !important;
            gap: 0.5rem !important;
        }

        .form-buttons .btn {
            width: 100%;
            font-size: 0.85rem;
        }

        .form-buttons .btn svg {
            width: 14px;
            height: 14px;
        }

        /* Form controls */
        .form-label {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .form-text {
            font-size: 0.8rem;
        }

        .form-control {
            font-size: 0.9rem;
        }

        /* Alert boxes */
        .alert {
            font-size: 0.85rem;
            padding: 0.75rem;
        }

        .alert h6 {
            font-size: 0.9rem;
        }

        .alert svg {
            width: 16px;
            height: 16px;
        }

        .alert ul {
            font-size: 0.85rem;
            padding-left: 1.2rem;
        }

        .alert li {
            margin-bottom: 0.25rem;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .card-body {
            padding: 0.5rem;
        }

        .card-header {
            padding: 0.5rem;
        }

        .card-header h3.card-title,
        .card-header h5.card-title {
            font-size: 0.9rem;
        }

        .form-buttons .btn {
            font-size: 0.8rem;
        }

        .alert {
            padding: 0.5rem;
        }

        .mb-3 {
            margin-bottom: 0.75rem !important;
        }
    }


/* ======================================================
 * e_ipam_addresses.tpl
 * ====================================================== */

    #addressesTable {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #addressesTable td {
        vertical-align: middle;
    }

    .btn-assign-ip {
        background-color: #28a745;
        border-color: #28a745;
        color: white !important;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: all 0.2s ease;
    }

    .btn-assign-ip:hover {
        background-color: #218838;
        border-color: #1e7e34;
        color: white !important;
        text-decoration: none;
    }

    .btn-assign-ip svg {
        margin-right: 6px;
    }

    .btn-address-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-edit-address {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-address:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-release-address {
        background-color: #6c757d;
        border-color: #6c757d;
        color: white !important;
    }

    .btn-release-address:hover {
        background-color: #5a6268;
        border-color: #545b62;
        color: white !important;
    }

    .btn-delete-address {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-address:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    .actions-cell {
        white-space: nowrap;
    }

    @media screen and (max-width: 768px) {
        .btn-address-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }
    }


/* ======================================================
 * e_ipam_classes.tpl
 * ====================================================== */

    #classesTable {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #classesTable td {
        vertical-align: middle;
    }

    .class-color-box {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        display: inline-block;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .btn-class-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-view-pools {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
    }

    .btn-view-pools:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white !important;
    }

    .btn-edit-class {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-class:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-delete-class {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-class:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    .dataTables_filter {
        margin-bottom: 1rem;
    }

    .dataTables_filter label {
        font-weight: 500;
        color: #495057;
    }

    .dataTables_filter input {
        margin-left: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        transition: border-color 0.15s ease-in-out;
        font-size: 0.9rem;
    }

    .dataTables_filter input:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    .dataTables_paginate .paginate_button {
        padding: 0.375rem 0.75rem;
        margin: 0 0.125rem;
        border-radius: 0.375rem;
        border: 1px solid #dee2e6;
        color: #495057;
    }

    .dataTables_paginate .paginate_button:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

    .dataTables_paginate .paginate_button.current {
        background-color: #667eea;
        border-color: #667eea;
        color: white;
    }

    .dataTables_info {
        color: #6c757d;
        font-size: 0.875rem;
        padding-top: 1rem;
    }

    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
    }

    .actions-cell {
        white-space: nowrap;
    }

    @media screen and (max-width: 768px) {
        .card-body {
            padding: 0.75rem;
        }

        .btn-class-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }

        .class-color-box {
            width: 40px;
            height: 40px;
        }
    }


/* ======================================================
 * e_ipam_device_details.tpl
 * ====================================================== */

    .btn-device-addr-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-edit-addr {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-addr:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .actions-cell {
        white-space: nowrap;
    }

    @media screen and (max-width: 768px) {
        .btn-device-addr-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }
    }


/* ======================================================
 * e_ipam_devices.tpl
 * ====================================================== */

    #devicesTable {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #devicesTable td {
        vertical-align: middle;
    }

    .btn-device-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-view-ips {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
    }

    .btn-view-ips:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white !important;
    }

    .btn-edit-device {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-device:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-delete-device {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-device:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    .actions-cell {
        white-space: nowrap;
    }

    @media screen and (max-width: 768px) {
        .btn-device-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }
    }


/* ======================================================
 * e_ipam_pools.tpl
 * ====================================================== */

    #poolsTable {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #poolsTable td {
        vertical-align: middle;
    }

    .btn-pool-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-list-addresses {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
    }

    .btn-list-addresses:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white !important;
    }

    .btn-edit-pool {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-pool:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-delete-pool {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-pool:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    .actions-cell {
        white-space: nowrap;
    }

    @media screen and (max-width: 768px) {
        .btn-pool-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }
    }


/* ======================================================
 * e_ipam_search.tpl
 * ====================================================== */

    .btn-search-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-view-pool {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
    }

    .btn-view-pool:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white !important;
    }

    .btn-edit-result {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-result:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .actions-cell {
        white-space: nowrap;
    }

    @media screen and (max-width: 768px) {
        .btn-search-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }
    }


/* ======================================================
 * e_logs_list.tpl
 * ====================================================== */

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .stats-row {
            flex-direction: column;
        }

        .stat-card {
            margin-bottom: 0.5rem;
        }

        .table-desktop {
            display: none;
        }

        .logs-mobile-card {
            display: block;
        }

        .log-card {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .log-card-header {
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .log-card-row {
            display: flex;
            justify-content: space-between;
            padding: 0.25rem 0;
            font-size: 0.85rem;
        }

        .log-card-label {
            font-weight: 500;
            color: #6c757d;
        }

        .filters-row .col-md-3,
        .filters-row .col-md-2 {
            margin-bottom: 0.5rem;
        }
    }

    @media (min-width: 769px) {
        .table-desktop {
            display: table;
        }

        .logs-mobile-card {
            display: none;
        }
    }

    .stat-card {
        text-align: center;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 6px;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: bold;
        color: #0d6efd;
    }

    .stat-label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    /* Ujednolicone „soft" badge (jak na liście urządzeń backupu) */
    .action-badge {
        display: inline-block;
        border-radius: 3px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 600;
        /* domyślny neutralny soft - dla akcji bez własnego koloru (np. login/logout) */
        background-color: #f4f5f6;
        border: 1px solid #9aa0a6;
        color: #495057;
    }

    .action-create {
        background-color: #f0fff4;
        border: 1px solid #5cb85c;
        color: #2d7a2d;
    }

    .action-update {
        background-color: #fffbea;
        border: 1px solid #d9a441;
        color: #92700a;
    }

    .action-delete {
        background-color: #fff5f5;
        border: 1px solid #d9534f;
        color: #a94442;
    }

    .action-execute {
        background-color: #eef6ff;
        border: 1px solid #4a90d9;
        color: #1f5c99;
    }

    .details-column {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }

    .details-column:hover {
        text-decoration: underline;
    }


/* ======================================================
 * e_notifications_list.tpl
 * ====================================================== */

    .notif-row-unread {
        background-color: rgba(32, 107, 196, 0.06);
    }

    .notif-row-link {
        color: inherit;
        text-decoration: none;
        display: inline-block;
    }

    .notif-row-link:hover {
        color: inherit;
    }

    .btn-notif-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
        background: none;
    }

    .btn-notif-read {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-notif-read:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-notif-unread {
        background-color: #206bc4;
        border-color: #206bc4;
        color: white !important;
    }

    .btn-notif-unread:hover {
        background-color: #1a56a0;
        border-color: #1a56a0;
        color: white !important;
    }

    .btn-notif-delete {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-notif-delete:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }


/* ======================================================
 * e_olt_detect_list.tpl
 * ====================================================== */

    .detect-status {
        min-height: 30px;
        display: flex;
        align-items: center;
    }

    .ont-details {
        margin-top: 10px;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 6px;
        display: none;
    }

    .ont-details.show {
        display: block;
    }

    .ont-item {
        padding: 8px;
        border-bottom: 1px solid #dee2e6;
    }

    .ont-item:last-child {
        border-bottom: none;
    }

    .ont-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
        margin-right: 8px;
    }

    .ont-badge svg {
        flex-shrink: 0;
    }

    .ont-badge-fsp {
        background-color: #e7f5ff;
        color: #1971c2;
    }

    .ont-badge-sn {
        background-color: #f1f3f5;
        color: #495057;
    }

    .ont-item-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 2px solid #dee2e6;
    }

    .ont-item-header svg {
        color: #16a34a;
        flex-shrink: 0;
    }

    /* Mobile OLT card - ten sam jezyk wizualny co .mobile-ont-card (e_olt_ont_list.tpl) */
    #oltDetectTable thead {
        display: none;
    }

    @media (min-width: 768px) {
        #oltDetectTable thead {
            display: table-header-group;
        }
    }

    .mobile-olt-card {
        padding: 1rem;
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        margin-bottom: 0.75rem;
    }

    .mobile-olt-card .olt-name {
        font-weight: 700;
        font-size: 1rem;
        color: #212529;
        margin-bottom: 0.15rem;
    }

    .mobile-olt-card .olt-desc {
        font-size: 0.8rem;
        color: #6c757d;
        margin-bottom: 0.75rem;
    }

    .mobile-olt-card .btn-detect {
        width: 100%;
        margin-bottom: 0.6rem;
        padding: 8px 12px;
        border-radius: 6px;
        font-weight: 500;
    }

    .mobile-olt-card .detect-status-mobile {
        font-size: 0.85rem;
        min-height: 0;
    }

    .mobile-olt-card .detect-status-mobile:empty,
    .mobile-olt-card .detect-status-mobile:has(> span.text-muted:only-child) {
        display: none;
    }

    /* Mobile optimizations */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.5rem;
        }

        .card-header {
            padding: 0.5rem 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 16px;
            height: 16px;
        }

        .alert {
            font-size: 0.875rem;
            padding: 0.5rem;
        }

        .alert svg {
            width: 16px;
            height: 16px;
        }

        /* Table adjustments */
        .table-responsive {
            border: none;
            margin: 0;
        }

        table.dataTable {
            border: none !important;
        }

        table.dataTable thead th {
            border: none !important;
            padding: 0.5rem 0.25rem !important;
            font-size: 0.9rem;
            background: #f8f9fa;
        }

        table.dataTable tbody {
            border: none !important;
        }

        table.dataTable tr {
            border: none !important;
            background: transparent !important;
        }

        table.dataTable td.mobile-view-cell {
            border: none !important;
            padding: 0.25rem 0 !important;
        }

        .ont-item {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 10px;
            padding: 12px;
            background: white;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            margin-bottom: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        }

        .ont-item > div:first-child {
            width: 100%;
        }

        .ont-item .btn,
        .ont-item .btn-create-profile {
            width: 100%;
            justify-content: center;
        }

        .ont-item .ont-badges-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .ont-badge {
            margin-right: 0;
        }

        .ont-item-header {
            padding-bottom: 6px;
            margin-bottom: 6px;
        }

        .ont-item-header svg {
            width: 16px;
            height: 16px;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .card-body {
            padding: 0.5rem;
        }

        .card-header {
            padding: 0.5rem;
        }

        .table-responsive {
            margin: 0 -0.5rem;
        }

        .ont-badge {
            font-size: 0.75rem;
            padding: 3px 6px;
        }

        .ont-badge svg {
            width: 12px;
            height: 12px;
        }

        .ont-item {
            padding: 10px;
        }

        .ont-item-header {
            font-size: 0.85rem;
        }

        .ont-item-header svg {
            width: 14px;
            height: 14px;
        }
    }


/* ======================================================
 * e_olt_list.tpl
 * ====================================================== */

    /* Podstawowe style dla tabeli */
    #table1 {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #table1 td {
        vertical-align: middle;
    }

    /* Przyciski akcji */
    .btn-olt-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-list-ont {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
    }

    .btn-list-ont:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white !important;
    }

    .btn-edit-olt {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-olt:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-delete-olt {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-olt:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    .btn-toggle-status {
        background-color: #6c757d;
        border-color: #6c757d;
        color: white !important;
    }

    .btn-toggle-status:hover {
        background-color: #5a6268;
        border-color: #545b62;
        color: white !important;
    }

    /* Style dla wyszukiwania */
    .dataTables_filter {
        margin-bottom: 1rem;
    }

    .dataTables_filter label {
        font-weight: 500;
        color: #495057;
    }

    .dataTables_filter input {
        margin-left: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        transition: border-color 0.15s ease-in-out;
        font-size: 0.9rem;
    }

    .dataTables_filter input:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    /* Style dla paginacji */
    .dataTables_paginate .paginate_button {
        padding: 0.375rem 0.75rem;
        margin: 0 0.125rem;
        border-radius: 0.375rem;
        border: 1px solid #dee2e6;
        color: #495057;
    }

    .dataTables_paginate .paginate_button:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

    .dataTables_paginate .paginate_button.current {
        background-color: #667eea;
        border-color: #667eea;
        color: white;
    }

    /* Style dla info */
    .dataTables_info {
        color: #6c757d;
        font-size: 0.875rem;
        padding-top: 1rem;
    }

    /* Style dla hover efektu */
    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
    }

    .actions-cell {
        white-space: nowrap;
    }

    /* Style dla linku nazwy OLT */
    .text-primary {
        transition: color 0.2s ease;
    }

    .text-primary:hover {
        color: #0056b3 !important;
        text-decoration: underline !important;
    }

    /* Responsywne style */
    @media screen and (max-width: 768px) {
        .card-body {
            padding: 0.75rem;
        }

        .btn-olt-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }
    }


/* ======================================================
 * e_olt_ont_add.tpl
 * ====================================================== */

    .service-row {
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 6px;
        margin-bottom: 15px;
        border: 1px solid #dee2e6;
    }

    .service-row-header {
        font-weight: 600;
        margin-bottom: 10px;
        color: #495057;
    }

    .ont-info-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }

    .ont-info-badges .badge {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Mobile optimizations */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 1rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        .alert {
            font-size: 0.9rem;
            padding: 0.75rem;
        }

        .alert svg {
            width: 18px;
            height: 18px;
        }

        .alert strong {
            display: block;
            margin-bottom: 0.5rem;
        }

        /* Use on any .alert that's a plain sentence (not a stat callout) to undo the block rule above */
        .alert-inline-strong strong {
            display: inline;
            margin-bottom: 0;
        }

        .ont-info-badges {
            flex-direction: column;
            gap: 0.5rem;
        }

        .ont-info-badges .badge {
            display: block;
            width: 100%;
            text-align: left;
            padding: 0.5rem;
            font-size: 0.85rem;
            word-break: break-all;
        }

        .service-row {
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .service-row-header {
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
        }

        .service-row-header svg {
            width: 16px;
            height: 16px;
        }

        .form-label {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .form-text {
            font-size: 0.8rem;
        }

        .btn {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .card-body {
            padding: 0.5rem;
        }

        .card-header {
            padding: 0.5rem;
        }

        .card-header h3.card-title {
            font-size: 0.95rem;
        }

        .card-header h3.card-title svg {
            width: 16px;
            height: 16px;
        }

        .alert {
            font-size: 0.85rem;
            padding: 0.5rem;
        }

        .alert svg {
            width: 16px;
            height: 16px;
        }

        .ont-info-badges .badge {
            font-size: 0.8rem;
            padding: 0.4rem 0.5rem;
        }

        .service-row {
            padding: 0.5rem;
        }

        .service-row-header {
            font-size: 0.85rem;
        }

        .mb-4 {
            margin-bottom: 1rem !important;
        }
    }


/* ======================================================
 * e_olt_ont_list.tpl
 * ====================================================== */

    .signal-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid;
        font-size: 0.8rem;
        font-weight: 600;
        text-align: center;
    }

    .signal-good {
        background-color: #f0fff4;
        border-color: #5cb85c;
        color: #2d7a2d;
    }

    .signal-warning {
        background-color: #fffbea;
        border-color: #d9a441;
        color: #92700a;
    }

    .signal-critical {
        background-color: #fff5f5;
        border-color: #d9534f;
        color: #a94442;
    }

    .signal-los {
        background-color: #fdeceb;
        border-color: #dc3545;
        color: #842029;
    }

    .signal-unknown {
        background-color: #f4f5f6;
        border-color: #9aa0a6;
        color: #495057;
    }

    .status-badge {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        border: 1px solid;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .status-online {
        background-color: #f0fff4;
        border-color: #5cb85c;
        color: #2d7a2d;
    }

    .status-offline {
        background-color: #fff5f5;
        border-color: #d9534f;
        color: #a94442;
    }

    .ont-fsp {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        color: #495057;
    }

    .ont-description {
        font-size: 0.9rem;
        color: #6c757d;
    }

    .power-value {
        font-family: 'Courier New', monospace;
        font-weight: 500;
    }

    /* Mobile compact view */
    .mobile-ont-card {
        background: #fff;
        border: 1px solid #e9ecef;
        border-left: 4px solid #dee2e6;
        border-radius: 10px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        transition: border-left-color 0.2s ease;
    }

    /* Kolor lewej krawedzi odzwierciedla status ONT - dodawany jako klasa modyfikujaca
       (server-side w e_olt_ont_search.tpl, przez JS po doladowaniu AJAX w e_olt_ont_list.tpl) */
    .mobile-ont-card.is-online {
        border-left-color: #5cb85c;
    }

    .mobile-ont-card.is-offline {
        border-left-color: #d9534f;
    }

    .mobile-ont-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin-bottom: 0.65rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid #f1f3f5;
    }

    .mobile-ont-card .ont-id-badge {
        display: inline-block;
        padding: 4px 10px;
        background-color: #eef6ff;
        border: 1px solid #4a90d9;
        color: #1f5c99;
        border-radius: 6px;
        font-weight: 700;
        font-size: 0.8rem;
    }

    .mobile-ont-card-title {
        font-size: 1rem;
        font-weight: 600;
        color: #212529;
        margin-bottom: 0.85rem;
        line-height: 1.3;
    }

    /* .ont-description domyslnie jest przygaszonym tekstem pomocniczym w wierszu tabeli
       (patrz nizej), ale w karcie mobilnej pelni role tytulu - musi byc czytelny */
    .mobile-ont-card-title .ont-description {
        color: #212529;
        font-size: 1rem;
        font-weight: 600;
    }

    .mobile-ont-card-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
        margin-bottom: 0.9rem;
    }

    .mobile-ont-card-stats > div {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 0.55rem 0.7rem;
    }

    .mobile-ont-card .stat-label {
        display: block;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: #6c757d;
        font-weight: 600;
        margin-bottom: 0.3rem;
    }

    .mobile-ont-card .stat-value {
        font-size: 0.85rem;
        font-weight: 600;
    }

    .btn-view-ont-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
        padding: 8px 12px;
        background-color: #0054a6;
        border: 1px solid #0054a6;
        border-radius: 6px;
        color: white !important;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }

    .btn-view-ont-mobile:hover {
        background-color: #004c95;
        border-color: #004c95;
        color: white !important;
    }

    /* DataTables 2.x (Bootstrap5 layout) uzywa klas .dt-search/.dt-container -
       nie .dataTables_filter/.dataTables_wrapper (stare klasy z DataTables 1.x,
       ktore martwe siedza gdzie indziej w tym pliku po aktualizacji biblioteki).
       Pusta kolumna .dt-layout-start (brak dlugosci strony - paging:false) w
       parze z .justify-content-between na .row powodowala, ze pole wyszukiwania
       wygladalo na przypadkowo wysrodkowane zamiast wypelniac szerokosc. */
    #ontTable_wrapper .dt-layout-start:empty {
        display: none;
    }

    #ontTable_wrapper .dt-search {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    #ontTable_wrapper .dt-search label {
        margin-bottom: 0;
        font-weight: 500;
        color: #495057;
        white-space: nowrap;
    }

    #ontTable_wrapper .dt-search input {
        flex: 1;
        min-width: 0;
    }

    /* Ukryty naglowek tabeli na mobile - karty ponizej same opisuja tresc
       (ten sam problem i to samo rozwiazanie co #oltDetectTable) */
    #ontTable thead {
        display: none;
    }

    @media (min-width: 768px) {
        #ontTable thead {
            display: table-header-group;
        }
    }

    /* Mobile optimizations */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.5rem;
        }

        .card-header {
            padding: 0.5rem 0.75rem;
        }

        /* Remove table styling on mobile */
        .table-responsive {
            border: none;
            margin: 0;
        }

        table.dataTable {
            border: none !important;
        }

        table.dataTable thead th {
            border: none !important;
            padding: 0.5rem 0.25rem !important;
            font-size: 0.9rem;
            background: #f8f9fa;
        }

        table.dataTable tbody {
            border: none !important;
        }

        table.dataTable tr {
            border: none !important;
            background: transparent !important;
        }

        table.dataTable td.mobile-view-cell {
            border: none !important;
            padding: 0.25rem 0 !important;
        }

        /* Make mobile cards look better */
        .mobile-ont-card {
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .card-header h3.card-title,
        .card-header h5.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title small {
            display: block !important;
            margin-top: 0.25rem;
            font-size: 0.8rem !important;
        }

        .card-header h3.card-title svg,
        .card-header h5.card-title svg {
            width: 16px;
            height: 16px;
        }

        .card-header .btn {
            padding: 4px 8px;
            font-size: 0.75rem;
        }

        .card-header .btn svg {
            width: 14px;
            height: 14px;
        }

        .alert {
            font-size: 0.875rem;
            padding: 0.5rem;
        }

        .alert svg {
            width: 16px;
            height: 16px;
        }

        /* Compact badges for mobile */
        .signal-badge {
            padding: 2px 6px;
            font-size: 0.7rem;
            min-width: 60px;
        }

        .status-badge {
            padding: 2px 6px;
            font-size: 0.7rem;
        }

        .ont-fsp {
            font-size: 0.85rem;
        }

        .ont-description {
            font-size: 0.8rem;
        }

        .power-value {
            font-size: 0.85rem;
        }

        /* DataTable mobile adjustments */
        table.dataTable {
            font-size: 0.8rem;
        }

        table.dataTable tbody td {
            padding: 4px 2px;
        }

        table.dataTable thead th {
            padding: 6px 2px;
            font-size: 0.75rem;
        }

        table.dataTable .btn-sm {
            padding: 2px 4px;
        }

        table.dataTable .btn-sm svg {
            width: 14px;
            height: 14px;
        }

        /* DataTable controls - force vertical stacking on mobile */
        .dataTables_wrapper .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .dataTables_wrapper .row > div {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .dataTables_wrapper .row:first-child {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .dataTables_wrapper .row:first-child > .col-sm-12,
        .dataTables_wrapper .row:first-child > .col-12 {
            flex: 0 0 100%;
            max-width: 100%;
            width: 100%;
        }

        .dataTables_wrapper .row:first-child > div {
            display: block;
            text-align: left !important;
        }

        .dataTables_wrapper .dataTables_length {
            text-align: left !important;
            margin-bottom: 0.5rem;
            float: none !important;
        }

        .dataTables_wrapper .dataTables_filter {
            text-align: left !important;
            margin-bottom: 0.75rem;
            margin-top: 0.5rem;
            float: none !important;
        }

        .dataTables_wrapper .dataTables_length label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.5rem;
            margin-bottom: 0;
            font-size: 0.85rem;
            white-space: nowrap;
            text-align: left;
        }

        .dataTables_wrapper .dataTables_filter label {
            display: block;
            margin-bottom: 0;
            font-size: 0.85rem;
            text-align: left;
        }

        .dataTables_wrapper .dataTables_length select {
            width: auto !important;
            min-width: 60px;
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
        }

        .dataTables_wrapper .dataTables_filter input {
            display: block;
            width: 100% !important;
            margin-top: 0.25rem;
            font-size: 0.85rem;
            padding: 0.35rem 0.5rem;
        }

        /* Bottom controls */
        .dataTables_wrapper .row:last-child {
            display: flex;
            flex-direction: column;
        }

        .dataTables_wrapper .dataTables_info {
            font-size: 0.75rem;
            text-align: center;
            margin-bottom: 0.5rem;
            padding: 0;
        }

        .dataTables_wrapper .dataTables_paginate {
            font-size: 0.75rem;
            text-align: center;
            padding: 0;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.25rem 0.4rem;
            font-size: 0.75rem;
            margin: 0 1px;
        }

        /* Legend responsive */
        .card-body .row > div {
            margin-bottom: 0.75rem;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .card-body {
            padding: 0.5rem;
        }

        .card-header {
            padding: 0.5rem;
        }

        .table-responsive {
            margin: 0 -0.5rem;
        }

        /* Even more compact on very small screens */
        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            font-size: 0.8rem;
        }

        .dataTables_wrapper .dataTables_filter input {
            font-size: 0.8rem;
            padding: 0.2rem 0.4rem;
        }

        .dataTables_wrapper .dataTables_length select {
            font-size: 0.8rem;
            padding: 0.2rem 0.4rem;
        }
    }


/* ======================================================
 * e_olt_ont_view.tpl
 * ====================================================== */

    .btn-delete-sp {
        padding: 6px 12px;
        border-radius: 6px;
        border: 1px solid #dc3545;
        background-color: #dc3545;
        color: white !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .btn-delete-sp:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    /* Mobile responsive styles */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.75rem;
        }

        /* Header buttons - stack vertically on mobile */
        .header-buttons {
            flex-direction: column !important;
            gap: 0.5rem !important;
            width: 100%;
        }

        .header-buttons .btn {
            width: 100%;
            font-size: 0.85rem;
        }

        .header-buttons .btn svg {
            width: 16px;
            height: 16px;
        }

        /* Header title */
        .card-header h3.card-title {
            font-size: 0.95rem;
            line-height: 1.3;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        /* Hide button text on very small screens, show only icons */
        .btn-text {
            display: none;
        }

        /* Service ports - hide desktop table on mobile */
        .service-ports-table {
            display: none;
        }

        .service-ports-mobile {
            display: block;
        }

        /* Mobile service port card */
        .sp-mobile-card {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
        }

        .sp-mobile-card .sp-header {
            font-weight: 600;
            margin-bottom: 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sp-mobile-card .sp-row {
            display: flex;
            justify-content: space-between;
            padding: 0.25rem 0;
            font-size: 0.85rem;
        }

        .sp-mobile-card .sp-label {
            font-weight: 500;
            color: #6c757d;
        }

        .sp-mobile-card .badge {
            font-size: 0.75rem;
        }

        /* Chart button group */
        .btn-group-sm .btn {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        /* Tables */
        .table {
            font-size: 0.85rem;
        }

        .table th,
        .table td {
            padding: 0.5rem 0.25rem;
        }

        /* Form controls */
        .form-control-sm {
            font-size: 0.85rem;
        }

    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .card-body {
            padding: 0.5rem;
        }

        .card-header {
            padding: 0.5rem;
        }

        .card-header h3.card-title {
            font-size: 0.9rem;
        }

        .btn-group-sm .btn {
            font-size: 0.7rem;
            padding: 0.2rem 0.4rem;
        }

        .sp-mobile-card {
            padding: 0.5rem;
        }

        .sp-mobile-card .sp-row {
            font-size: 0.8rem;
        }
    }

    /* Desktop - hide mobile view */
    @media (min-width: 769px) {
        .service-ports-table {
            display: table;
        }

        .service-ports-mobile {
            display: none;
        }

        .btn-text {
            display: inline;
        }
    }


/* ======================================================
 * e_olt_ports_list.tpl
 * ====================================================== */

    .port-fsp {
        font-family: 'Courier New', monospace;
        font-weight: bold;
        color: #495057;
    }

    .btn-view-onts {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    .btn-view-onts:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white !important;
    }

    /* Alias portu - edycja inline (widok Porty GPON) */
    .btn-save-alias {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
        padding: 6px 10px;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    .btn-save-alias:hover {
        background-color: #059669;
        border-color: #059669;
    }

    .btn-save-alias:disabled {
        opacity: 0.65;
        cursor: not-allowed;
    }

    /* Mobile optimizations */
    @media (max-width: 768px) {
        .container-fluid {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .card {
            margin-bottom: 0.75rem !important;
        }

        .card-body {
            padding: 0.75rem;
        }

        .card-header {
            padding: 0.5rem 0.75rem;
        }

        .card-header h3.card-title {
            font-size: 1rem;
        }

        .card-header h3.card-title svg {
            width: 18px;
            height: 18px;
        }

        .card-header .btn {
            padding: 4px 8px;
            font-size: 0.75rem;
        }

        .card-header .btn svg {
            width: 14px;
            height: 14px;
        }

        .alert {
            font-size: 0.875rem;
            padding: 0.5rem;
        }

        .alert svg {
            width: 16px;
            height: 16px;
        }

        .btn-view-onts {
            padding: 4px 8px;
            font-size: 0.75rem;
        }

        .btn-view-onts svg {
            width: 14px;
            height: 14px;
            margin-right: 2px;
        }

        .port-fsp {
            font-size: 0.875rem;
        }

        /* DataTable mobile adjustments */
        table.dataTable {
            font-size: 0.85rem;
        }

        table.dataTable tbody td {
            padding: 6px 4px;
        }

        table.dataTable thead th {
            padding: 8px 4px;
        }

        /* Hide text on mobile, show only icon */
        .btn-view-onts .btn-text {
            display: none;
        }

        .btn-view-onts svg {
            margin-right: 0;
        }

        /* DataTable controls - force vertical stacking on mobile */
        .dataTables_wrapper .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .dataTables_wrapper .row > div {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .dataTables_wrapper .row:first-child {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .dataTables_wrapper .row:first-child > .col-sm-12,
        .dataTables_wrapper .row:first-child > .col-12 {
            flex: 0 0 100%;
            max-width: 100%;
            width: 100%;
        }

        .dataTables_wrapper .row:first-child > div {
            display: block;
            text-align: left !important;
        }

        .dataTables_wrapper .dataTables_length {
            text-align: left !important;
            margin-bottom: 0.5rem;
            float: none !important;
        }

        .dataTables_wrapper .dataTables_filter {
            text-align: left !important;
            margin-bottom: 0.75rem;
            margin-top: 0.5rem;
            float: none !important;
        }

        .dataTables_wrapper .dataTables_length label {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.5rem;
            margin-bottom: 0;
            font-size: 0.85rem;
            white-space: nowrap;
            text-align: left;
        }

        .dataTables_wrapper .dataTables_filter label {
            display: block;
            margin-bottom: 0;
            font-size: 0.85rem;
            text-align: left;
        }

        .dataTables_wrapper .dataTables_length select {
            width: auto !important;
            min-width: 60px;
            font-size: 0.85rem;
            padding: 0.25rem 0.5rem;
        }

        .dataTables_wrapper .dataTables_filter input {
            display: block;
            width: 100% !important;
            margin-top: 0.25rem;
            font-size: 0.85rem;
            padding: 0.35rem 0.5rem;
        }

        /* Bottom controls */
        .dataTables_wrapper .row:last-child {
            display: flex;
            flex-direction: column;
        }

        .dataTables_wrapper .dataTables_info {
            font-size: 0.8rem;
            text-align: center;
            margin-bottom: 0.5rem;
            padding: 0;
        }

        .dataTables_wrapper .dataTables_paginate {
            font-size: 0.8rem;
            text-align: center;
            padding: 0;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            padding: 0.25rem 0.5rem;
            font-size: 0.8rem;
            margin: 0 2px;
        }
    }

    @media (max-width: 576px) {
        .container-fluid {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

        .card-body {
            padding: 0.5rem;
        }

        .card-header {
            padding: 0.5rem;
        }

        .table-responsive {
            margin: 0 -0.5rem;
        }

        /* Even more compact on very small screens */
        .dataTables_wrapper .dataTables_length label,
        .dataTables_wrapper .dataTables_filter label {
            font-size: 0.8rem;
        }

        .dataTables_wrapper .dataTables_filter input {
            font-size: 0.8rem;
            padding: 0.2rem 0.4rem;
        }

        .dataTables_wrapper .dataTables_length select {
            font-size: 0.8rem;
            padding: 0.2rem 0.4rem;
        }
    }

    @media (min-width: 769px) {
        .btn-view-onts .btn-icon-only {
            display: none;
        }
    }


/* ======================================================
 * e_olt_profiles_list.tpl
 * ====================================================== */

    .profile-section {
        margin-bottom: 2rem;
    }

    .btn-profile-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-edit-profile {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit-profile:hover {
        background-color: #059669;
        color: white !important;
    }

    .btn-delete-profile {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-profile:hover {
        background-color: #c82333;
        color: white !important;
    }

    .btn-create-profile {
        background-color: #28a745;
        border-color: #28a745;
        color: white !important;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: all 0.2s ease;
    }

    .btn-create-profile:hover {
        background-color: #218838;
        color: white !important;
    }

    .btn-create-profile svg {
        margin-right: 6px;
    }


/* ======================================================
 * e_olt_view.tpl
 * ====================================================== */

    .info-card {
        background: #fff;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .info-card h4 {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 2px solid #e9ecef;
        color: #495057;
    }

    .info-card .info-row {
        gap: 0.5rem;
    }

    .info-row {
        display: flex;
        padding: 0.75rem 0;
        border-bottom: 1px solid #f1f3f5;
    }

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

    .info-label {
        font-weight: 600;
        color: #6c757d;
        min-width: 180px;
        flex-shrink: 0;
    }

    .info-value {
        color: #212529;
        flex: 1;
    }

    .info-value code {
        background-color: #f8f9fa;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.9rem;
        color: #e83e8c;
    }

    .status-badge-large {
        display: inline-block;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.9rem;
    }

    .status-active {
        background-color: #d4edda;
        color: #155724;
    }

    .status-inactive {
        background-color: #f8d7da;
        color: #721c24;
    }

    .btn-action {
        padding: 0.65rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        min-width: 44px;
        min-height: 44px;
    }

    .btn-edit {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-edit:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-delete {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    .btn-back {
        background-color: #6c757d;
        border-color: #6c757d;
        color: white !important;
    }

    .btn-back:hover {
        background-color: #5a6268;
        border-color: #545b62;
        color: white !important;
    }

    .btn-test-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
    }

    @media (max-width: 768px) {
        .info-row {
            flex-direction: column;
        }

        .info-label {
            margin-bottom: 0.25rem;
            min-width: auto;
        }
    }

    /* DataTables styles for Critical ONTs table */
    #criticalOntsTable_wrapper .dataTables_filter {
        margin-bottom: 1rem;
    }

    #criticalOntsTable_wrapper .dataTables_filter label {
        font-weight: 500;
        color: #495057;
    }

    #criticalOntsTable_wrapper .dataTables_filter input {
        margin-left: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        transition: border-color 0.15s ease-in-out;
        font-size: 0.9rem;
    }

    #criticalOntsTable_wrapper .dataTables_filter input:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    #criticalOntsTable_wrapper .dataTables_length label {
        font-weight: 500;
        color: #495057;
        margin-bottom: 1rem;
    }

    #criticalOntsTable_wrapper .dataTables_length select {
        margin: 0 0.5rem;
        padding: 0.375rem 0.75rem;
        border: 2px solid #e9ecef;
        border-radius: 6px;
        font-size: 0.9rem;
    }

    #criticalOntsTable_wrapper .dataTables_paginate .paginate_button {
        padding: 0.375rem 0.75rem;
        margin: 0 0.125rem;
        border-radius: 0.375rem;
        border: 1px solid #dee2e6;
        color: #495057;
        cursor: pointer;
    }

    #criticalOntsTable_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

    #criticalOntsTable_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #667eea;
        border-color: #667eea;
        color: white !important;
    }

    #criticalOntsTable_wrapper .dataTables_paginate .paginate_button.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    #criticalOntsTable_wrapper .dataTables_info {
        color: #6c757d;
        font-size: 0.875rem;
        padding-top: 1rem;
    }

    #criticalOntsTable tbody tr:hover {
        background-color: #f8f9fa;
    }

    #criticalOntsTable th {
        font-weight: 600;
        background-color: #f8f9fa;
    }

    /* Critical ONT badge styles + status/połączenie (widok OLT) - jasne tło, wyraźny kolorowy border */
    .rx-badge-los,
    .rx-badge-critical,
    .status-badge-online,
    .status-badge-offline,
    .badge-status-active,
    .badge-status-standby,
    .badge-status-inactive,
    .badge-conn-ssh,
    .badge-conn-telnet,
    .badge-conn-custom,
    .badge-soft-success,
    .badge-soft-danger,
    .badge-soft-warning,
    .badge-soft-primary,
    .badge-soft-secondary,
    .badge-soft-info {
        display: inline-block;
        border-radius: 3px;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 600;
    }

    .rx-badge-los {
        background-color: #f4f5f6;
        border: 1px solid #6c757d;
        color: #495057;
    }

    .rx-badge-critical,
    .badge-soft-danger {
        background-color: #fff5f5;
        border: 1px solid #d9534f;
        color: #a94442;
    }

    /* Tabler's "a.badge{color:...}" (element+class) outranks the plain class
       selectors above when the badge is a clickable <a> (np. link do zdarzenia n6
       albo wyniku AbuseIPDB) - bez tego tekst badge'a jest niewidoczny (bialy na
       jasnym tle). Pokrywa wszystkie warianty soft, nie tylko danger - AbuseIPDB
       renderuje ten sam badge jako danger/warning/secondary zaleznie od wyniku. */
    a.badge-soft-danger,
    a.badge-soft-danger:hover {
        color: #a94442;
        text-decoration: none;
    }

    a.badge-soft-warning,
    a.badge-soft-warning:hover {
        color: #92700a;
        text-decoration: none;
    }

    a.badge-soft-secondary,
    a.badge-soft-secondary:hover {
        color: #495057;
        text-decoration: none;
    }

    a.badge-soft-primary,
    a.badge-soft-primary:hover {
        color: #1f5c99;
        text-decoration: none;
    }

    a.badge-soft-info,
    a.badge-soft-info:hover {
        color: #0e7490;
        text-decoration: none;
    }

    a.badge-soft-success,
    a.badge-soft-success:hover {
        color: #2d7a2d;
        text-decoration: none;
    }

    /* badge-status-active/inactive tez uzywane jako klikalne <a> (np. IPAM -> link do
       n6/AbuseIPDB) - ten sam problem z a.badge{color:...} z Tablera co powyzej */
    a.badge-status-active,
    a.badge-status-active:hover {
        color: #2d7a2d;
        text-decoration: none;
    }

    a.badge-status-inactive,
    a.badge-status-inactive:hover {
        color: #495057;
        text-decoration: none;
    }

    .status-badge-online,
    .badge-status-active,
    .badge-soft-success {
        background-color: #f0fff4;
        border: 1px solid #5cb85c;
        color: #2d7a2d;
    }

    .status-badge-offline,
    .badge-status-inactive,
    .badge-conn-custom {
        background-color: #f4f5f6;
        border: 1px solid #9aa0a6;
        color: #495057;
    }

    .badge-conn-ssh,
    .badge-status-standby {
        background-color: #eef6ff;
        border: 1px solid #4a90d9;
        color: #1f5c99;
    }

    .badge-conn-telnet,
    .badge-soft-warning {
        background-color: #fffbea;
        border: 1px solid #d9a441;
        color: #92700a;
    }

    .badge-soft-primary {
        background-color: #eef6ff;
        border: 1px solid #4a90d9;
        color: #1f5c99;
    }

    .badge-soft-secondary {
        background-color: #f4f5f6;
        border: 1px solid #9aa0a6;
        color: #495057;
    }

    .badge-soft-info {
        background-color: #ecfeff;
        border: 1px solid #22b8cf;
        color: #0e7490;
    }

    /* Board/slot cards (widok OLT - Dane podstawowe) */
    .board-slot-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .board-slot-card {
        width: 128px;
        border: 2px solid #dee2e6;
        border-radius: 10px;
        padding: 10px 6px;
        text-align: center;
        background: #fff;
        transition: all 0.15s ease;
    }

    .board-slot-card.board-slot-clickable {
        cursor: pointer;
    }

    .board-slot-card.board-slot-clickable:hover {
        box-shadow: 0 4px 10px rgba(0,0,0,0.08);
        transform: translateY(-2px);
    }

    .board-slot-card.board-slot-active {
        border-color: #5cb85c;
    }

    .board-slot-card.board-slot-standby {
        border-color: #4a90d9;
    }

    .board-slot-card.board-slot-empty {
        border-style: dashed;
        opacity: 0.6;
    }

    .board-slot-card .board-slot-number {
        font-size: 11px;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .board-slot-card .board-slot-icon {
        margin: 6px 0;
        color: #495057;
    }

    .board-slot-card.board-slot-active .board-slot-icon {
        color: #2d7a2d;
    }

    .board-slot-card.board-slot-standby .board-slot-icon {
        color: #1f5c99;
    }

    .board-slot-card .board-slot-name {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 6px;
        word-break: break-word;
    }

    @media (max-width: 576px) {
        .board-slot-card {
            width: 104px;
            padding: 8px 4px;
        }
    }

    /* Critical ONT table responsive */
    @media (max-width: 768px) {
        #criticalOntsTable thead {
            display: none;
        }

        #criticalOntsTable tbody tr {
            display: block;
            margin-bottom: 1rem;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            background: #f8f9fa;
            padding: 0.75rem;
        }

        #criticalOntsTable tbody td {
            display: block;
            text-align: left !important;
            padding: 0.5rem 0;
            border: none;
        }

        #criticalOntsTable tbody td:before {
            content: attr(data-label);
            font-weight: 600;
            color: #6c757d;
            margin-right: 0.5rem;
        }

        #criticalOntsTable tbody td.text-center {
            text-align: left !important;
        }
    }


/* ======================================================
 * e_pyxis_sms_forecast.tpl
 * ====================================================== */

    .badge-type-new       { background-color: #2fb344; color: #fff; }
    .badge-type-reminder  { background-color: #0ca5f0; color: #fff; }
    .badge-type-overdue6  { background-color: #f59f00; color: #fff; }
    .badge-type-overdue14 { background-color: #e8640c; color: #fff; }
    .badge-type-dluznik   { background-color: #d63939; color: #fff; }
    .badge-fs-past        { background-color: #868e96; color: #fff; }
    .badge-fs-today       { background-color: #d63939; color: #fff; }
    .badge-fs-future      { background-color: #0ca5f0; color: #fff; }
    /* Karty filtrujące */
    .forecast-filter-card {
        cursor: pointer;
        transition: opacity 0.15s, box-shadow 0.15s, transform 0.1s;
        user-select: none;
    }
    .forecast-filter-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .forecast-filter-card.fc-inactive { opacity: 0.4; }
    .forecast-filter-card.fc-active   { box-shadow: 0 0 0 2px currentColor, 0 4px 12px rgba(0,0,0,0.12); }

    /* DataTables – własny responsywny header */
    .forecast-dt-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
        border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    }
    .forecast-dt-header .dataTables_length { margin: 0; white-space: nowrap; }
    .forecast-dt-header .dataTables_filter { margin: 0; flex: 1; min-width: 140px; }
    .forecast-dt-header .dataTables_filter label { width: 100%; display: flex; align-items: center; gap: 0.4rem; margin: 0; white-space: nowrap; }
    .forecast-dt-header .dataTables_filter input { flex: 1; min-width: 0; }
    .forecast-dt-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem;
        border-top: 1px solid var(--tblr-border-color, #e6e7e9);
    }
    .forecast-dt-footer .dataTables_info  { margin: 0; font-size: 0.85rem; color: #6c757d; }
    .forecast-dt-footer .dataTables_paginate { margin: 0; }
    #forecastTable { width: 100% !important; }
    #forecastTable td, #forecastTable th { vertical-align: middle; }

    @media (max-width: 575px) {
        #forecastTypeTabs .nav-link { font-size: 0.78rem; padding-left: 0.55rem; padding-right: 0.55rem; }
        .forecast-summary-card .fw-semibold { font-size: 0.8rem !important; }
        .forecast-summary-card .text-muted  { font-size: 0.68rem !important; }
        #forecastTable td, #forecastTable th { padding: 0.3rem 0.45rem; font-size: 0.82rem; }
        .forecast-dt-footer { justify-content: center; }
    }


/* ======================================================
 * e_pyxis_sms_pending.tpl
 * ====================================================== */

    #pendingTable { width: 100% !important; }
    #pendingTable td, #pendingTable th { vertical-align: middle; }
    .sms-message-cell { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
    .badge-pending   { background-color: #f59f00; color: #fff; }
    .badge-scheduled { background-color: #0ca5f0; color: #fff; }

    /* Karty statusów – klikalne filtry */
    .pending-stat-card {
        cursor: pointer;
        transition: opacity 0.15s, box-shadow 0.15s, transform 0.1s;
        user-select: none;
    }
    .pending-stat-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
    .pending-stat-card.stat-inactive { opacity: 0.4; }
    .pending-stat-card.stat-active   { box-shadow: 0 0 0 2px currentColor, 0 4px 12px rgba(0,0,0,0.12); }

    /* Loader tabeli */
    .table-loader-wrap { position: relative; }
    #tableLoader {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0.7);
        z-index: 10;
        align-items: center;
        justify-content: center;
        border-radius: 0 0 4px 4px;
    }
    #tableLoader.active { display: flex; }

    /* DataTables – responsywny header */
    .pending-dt-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
        border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    }
    .pending-dt-header .dataTables_length { margin: 0; white-space: nowrap; }
    .pending-dt-header .dataTables_filter { margin: 0; flex: 1; min-width: 140px; }
    .pending-dt-header .dataTables_filter label { width: 100%; display: flex; align-items: center; gap: 0.4rem; margin: 0; white-space: nowrap; }
    .pending-dt-header .dataTables_filter input { flex: 1; min-width: 0; }
    .pending-dt-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.75rem;
        border-top: 1px solid var(--tblr-border-color, #e6e7e9);
    }
    .pending-dt-footer .dataTables_info     { margin: 0; font-size: 0.85rem; color: #6c757d; }
    .pending-dt-footer .dataTables_paginate { margin: 0; }

    @media (max-width: 575px) {
        #pendingTable td, #pendingTable th { padding: 0.3rem 0.45rem; font-size: 0.82rem; }
        .pending-dt-footer { justify-content: center; }
        .card-header .btn-label-hide { display: none; }
    }


/* ======================================================
 * e_pyxis_sms_sent.tpl
 * ====================================================== */

    #sentTable { width: 100% !important; }
    #sentTable td { vertical-align: middle; }
    .sms-message-cell { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ======================================================
 * e_smokeping_group.tpl
 * ====================================================== */

    .target-card {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        transition: all 0.2s ease;
    }

    .target-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .target-name {
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.25rem;
    }

    .target-host {
        color: #64748b;
        font-size: 0.875rem;
        font-family: 'Courier New', monospace;
    }

    .btn-view-graph {
        background-color: #667eea;
        border-color: #667eea;
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: all 0.2s ease;
    }

    .btn-view-graph:hover {
        background-color: #5568d3;
        border-color: #5568d3;
        color: white;
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .card-body {
            padding: 0.75rem;
        }

        .target-card {
            padding: 0.75rem;
        }
    }


/* ======================================================
 * e_smokeping_list.tpl
 * ====================================================== */

    .smokeping-card {
        transition: all 0.3s ease;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .smokeping-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .smokeping-group-link {
        text-decoration: none;
        color: inherit;
        display: block;
        padding: 1.5rem;
    }

    .smokeping-group-link:hover {
        color: inherit;
    }

    .smokeping-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 12px;
        flex-shrink: 0;
    }

    .smokeping-group-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.25rem;
    }

    .smokeping-group-file {
        font-size: 0.875rem;
        color: #64748b;
    }

    @media (max-width: 768px) {
        .smokeping-card {
            border-radius: 0;
        }

        .smokeping-group-link {
            padding: 1rem;
        }

        .smokeping-icon {
            width: 40px;
            height: 40px;
        }

        .smokeping-group-name {
            font-size: 1rem;
        }
    }


/* ======================================================
 * e_smokeping_manage.tpl
 * ====================================================== */

    .manage-card {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 1rem;
        transition: all 0.2s ease;
    }

    .manage-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .manage-group-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        background: white;
        border-radius: 8px;
        transition: background 0.2s ease;
    }

    .manage-group-item:hover {
        background: #f8f9fa;
    }

    .manage-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: #3a4859;
        border-radius: 8px;
        flex-shrink: 0;
    }

    .manage-group-name {
        flex: 1;
        margin-left: 1rem;
        font-weight: 600;
        color: #495057;
    }

    .manage-actions {
        display: flex;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    /* Przyciski akcji */
    .btn-smokeping-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-manage-group {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-manage-group:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-delete-group {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-group:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    /* Responsywne style */
    @media screen and (max-width: 768px) {
        .manage-card {
            border-radius: 0;
        }

        .manage-group-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .manage-group-name {
            margin: 0.75rem 0;
        }

        .manage-actions {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
        }

        .btn-smokeping-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .btn-create-group {
            width: 100%;
            justify-content: center;
        }
    }


/* ======================================================
 * e_smokeping_manage_group.tpl
 * ====================================================== */

    .target-row {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        transition: all 0.2s ease;
    }

    .target-row:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .target-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: #667eea;
        border-radius: 6px;
        flex-shrink: 0;
    }

    .target-info {
        flex: 1;
        margin-left: 1rem;
    }

    .target-name {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.25rem;
    }

    .target-host {
        color: #6c757d;
        font-size: 0.875rem;
        font-family: 'Courier New', monospace;
    }

    /* Przyciski akcji */
    .btn-smokeping-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-view-graph {
        background-color: #007bff;
        border-color: #007bff;
        color: white !important;
    }

    .btn-view-graph:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white !important;
    }

    .btn-edit-target {
        background-color: #0ea5e9;
        border-color: #0ea5e9;
        color: white !important;
    }

    .btn-edit-target:hover {
        background-color: #0284c7;
        border-color: #0284c7;
        color: white !important;
    }

    .btn-delete-target {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-delete-target:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    .btn-create-target {
        background-color: #28a745;
        border-color: #28a745;
        color: white !important;
        padding: 8px 16px;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: all 0.2s ease;
    }

    /* Packet Loss Badges */
    .badge-loss {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 600;
        min-width: 60px;
        text-align: center;
    }

    /* Color coding based on loss level */
    .badge-loss-good {
        background-color: #d1fae5;
        color: #065f46;
    }

    .badge-loss-medium {
        background-color: #fef3c7;
        color: #92400e;
    }

    .badge-loss-high {
        background-color: #fed7aa;
        color: #9a3412;
    }

    .badge-loss-critical {
        background-color: #fecaca;
        color: #991b1b;
    }

    .btn-create-target:hover {
        background-color: #218838;
        border-color: #1e7e34;
        color: white !important;
        text-decoration: none;
    }

    .btn-create-target svg {
        margin-right: 6px;
    }

    .actions-cell {
        white-space: nowrap;
    }

    /* Podstawowe style dla tabeli */
    #managementTable {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #managementTable td {
        vertical-align: middle;
    }

    /* Style dla wyszukiwania */
    .dataTables_filter {
        margin-bottom: 1rem;
    }

    .dataTables_filter label {
        font-weight: 500;
        color: #495057;
    }

    .dataTables_filter input {
        margin-left: 0.5rem;
        padding: 0.5rem 0.75rem;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        transition: border-color 0.15s ease-in-out;
        font-size: 0.9rem;
    }

    .dataTables_filter input:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }

    /* Style dla paginacji */
    .dataTables_paginate .paginate_button {
        padding: 0.375rem 0.75rem;
        margin: 0 0.125rem;
        border-radius: 0.375rem;
        border: 1px solid #dee2e6;
        color: #495057;
    }

    .dataTables_paginate .paginate_button:hover {
        background-color: #e9ecef;
        border-color: #adb5bd;
    }

    .dataTables_paginate .paginate_button.current {
        background-color: #667eea;
        border-color: #667eea;
        color: white;
    }

    /* Style dla info */
    .dataTables_info {
        color: #6c757d;
        font-size: 0.875rem;
        padding-top: 1rem;
    }

    /* Style dla hover efektu */
    table.dataTable tbody tr:hover {
        background-color: #f8f9fa;
    }

    /* Responsywne style */
    @media screen and (max-width: 768px) {
        .card-body {
            padding: 0.75rem;
        }

        .btn-smokeping-action {
            padding: 8px;
            margin: 3px;
            min-width: 36px;
            min-height: 36px;
        }

        .actions-cell {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            justify-content: center;
            white-space: normal;
        }

        .btn-create-target {
            width: 100%;
            justify-content: center;
        }

    }


/* ======================================================
 * e_smokeping_view.tpl
 * ====================================================== */

    .smokeping-graph-container {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        position: relative;
        min-height: 350px;
    }

    .smokeping-image {
        width: 30%;
        height: auto;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    #loadingOverlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(248, 249, 250, 0.95);
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .loading-spinner {
        width: 50px;
        height: 50px;
        border: 4px solid #e9ecef;
        border-top-color: #667eea;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .loading-text {
        margin-top: 1rem;
        color: #64748b;
        font-size: 1rem;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .smokeping-info {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .smokeping-info .info-row {
        display: flex;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f1f3f5;
    }

    .smokeping-info .info-row:last-child {
        border-bottom: none;
    }

    .smokeping-info .info-label {
        font-weight: 600;
        color: #64748b;
        min-width: 100px;
    }

    .smokeping-info .info-value {
        color: #1e293b;
    }

    .btn-add-group {
        background-color: #28a745;
        border-color: #28a745;
        color: white;
    }

    .btn-add-group:hover {
        background-color: #218838;
        border-color: #1e7e34;
        color: white;
    }

    .btn-add-target {
        background-color: #28a745;
        border-color: #28a745;
        color: white;
    }

    .btn-add-target:hover {
        background-color: #218838;
        border-color: #1e7e34;
        color: white;
    }

    .interactive-chart-section {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 1.75rem;
        margin-top: 2rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    }

    .time-range-selector {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
        padding: 0.5rem;
        background: #f8fafc;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
    }

    .time-range-btn {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
        border: 1px solid #e2e8f0;
        color: #64748b;
        font-weight: 500;
        font-size: 13px;
        padding: 6px 14px;
        border-radius: 6px;
    }

    .time-range-btn.active {
        background: #3a4859;
        border-color: #3a4859;
        color: white;
        box-shadow: 0 2px 8px rgba(58, 72, 89, 0.25);
        transform: translateY(-1px);
    }

    .time-range-btn:hover:not(.active) {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #475569;
    }

    .chart-container {
        margin-top: 1.25rem;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border-radius: 10px;
        padding: 1.5rem;
        border: 1px solid #e2e8f0;
    }

    /* Legenda kolorow strat pod interaktywnym wykresem (glowny widok i kafelki grupy) */
    .loss-color-legend {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px 10px;
        font-size: 12px;
        color: #64748b;
    }

    .loss-color-legend-label {
        font-weight: 600;
        margin-right: 2px;
    }

    .loss-color-swatch {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        margin-right: 2px;
        vertical-align: middle;
    }

    /* Podpis avg/max/min/now/sd pod wykresem - ten sam uklad co pod klasycznym
       wykresem SmokePinga/Haze */
    .smokeping-stats-caption {
        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
        font-size: 12px;
        color: #64748b;
    }

    .stats-caption-row {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 14px;
        padding: 1px 0;
    }

    .stats-caption-label {
        font-weight: 600;
        color: #475569;
        min-width: 90px;
    }

    @media (max-width: 768px) {
        .smokeping-graph-container {
            padding: 1rem;
            border-radius: 0;
        }

        .btn-action {
            font-size: 0.875rem;
            padding: 6px 12px;
            margin-bottom: 0.5rem;
        }

        .actions-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .actions-group .btn-action {
            width: 100%;
            justify-content: center;
            margin-right: 0;
        }

        .btn-add-group, .btn-add-target {
            width: 100%;
            justify-content: center;
        }

        .interactive-chart-section {
            padding: 1rem;
            border-radius: 8px;
            margin-top: 1rem;
        }

        .chart-container {
            height: 300px !important;
            padding: 0.75rem;
        }

        .time-range-selector {
            flex-direction: row;
            gap: 0.375rem;
            padding: 0.375rem;
        }

        .time-range-btn {
            flex: 1;
            font-size: 12px;
            padding: 5px 8px;
        }
    }


/* ======================================================
 * e_start_license.tpl
 * ====================================================== */

    .license-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .license-header {
        text-align: center;
        margin-bottom: 2rem;
        padding: 2rem 0;
        border-bottom: 3px solid #3a4859;
    }

    .license-header h1 {
        font-size: 2rem;
        font-weight: 600;
        color: #212529;
        margin-bottom: 0.5rem;
    }

    .license-section {
        margin-bottom: 2rem;
        padding: 1.5rem;
        background-color: #f8f9fa;
        border-left: 4px solid #3a4859;
        border-radius: 0.25rem;
    }

    .license-section h2 {
        font-size: 1.25rem;
        font-weight: 600;
        color: #3a4859;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .license-section h2::before {
        content: "▸";
        font-size: 1.5rem;
        color: #3a4859;
    }

    .license-section p {
        font-size: 1rem;
        line-height: 1.7;
        color: #495057;
        margin-bottom: 1rem;
    }

    .license-section p:last-child {
        margin-bottom: 0;
    }

    .license-section strong {
        color: #212529;
        font-weight: 600;
    }

    .license-alert {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        background: #3a4859;
        border: none;
        border-radius: 0.5rem;
        color: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .license-alert svg {
        flex-shrink: 0;
    }

    .license-card {
        border: none;
        border-radius: 0.5rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
    }

    @media (max-width: 768px) {
        .license-header h1 {
            font-size: 1.5rem;
        }

        .license-section {
            padding: 1rem;
        }

        .license-section h2 {
            font-size: 1.1rem;
        }

        .license-section p {
            font-size: 0.95rem;
        }
    }


/* ======================================================
 * e_start_login.tpl
 * ====================================================== */

    .page-wrapper {
        margin-left: 0 !important;
    }

    .login-shell {
        width: min(1120px, calc(100vw - 32px));
        min-height: calc(100vh - 96px);
        margin: 0 auto;
        padding: 48px 0;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(360px, 440px);
        align-items: center;
        gap: 48px;
        position: relative;
        isolation: isolate;
    }

    .login-shell::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(circle at 8% 16%, rgba(32, 107, 196, 0.12), transparent 30%),
            linear-gradient(135deg, #f7faff 0%, #eef4fb 46%, #f8fafc 100%);
    }

    .login-panel {
        color: #111827;
    }

    .login-brand {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 56px;
    }

    .login-logo {
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
        overflow: hidden;
    }

    .login-logo img {
        max-width: 58px;
        max-height: 58px;
        object-fit: contain;
    }

    .login-product {
        font-size: 1.35rem;
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: 0;
    }

    .login-product-subtitle {
        color: #64748b;
        margin-top: 4px;
        font-size: 0.95rem;
    }

    .login-copy {
        max-width: 620px;
    }

    .login-eyebrow {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        background: #eaf2ff;
        color: #1d4ed8;
        font-weight: 700;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0;
        margin-bottom: 18px;
    }

    .login-copy h1 {
        margin: 0;
        font-size: clamp(2rem, 5vw, 4.2rem);
        line-height: 1.02;
        letter-spacing: 0;
        font-weight: 850;
        color: #0f172a;
    }

    .login-copy p {
        margin: 22px 0 0;
        max-width: 560px;
        color: #475569;
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .login-feature-grid {
        margin-top: 44px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        max-width: 680px;
    }

    .login-feature {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 18px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    }

    .login-feature-icon {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        border-radius: 8px;
        background: #eef6ff;
        color: #206bc4;
    }

    .login-feature strong {
        display: block;
        color: #0f172a;
        font-size: 0.94rem;
        line-height: 1.2;
    }

    .login-feature span:last-child {
        display: block;
        color: #64748b;
        font-size: 0.86rem;
        line-height: 1.45;
        margin-top: 4px;
    }

    .login-card {
        padding: 34px;
        border-radius: 8px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    }

    /* Na desktopie logo jest juz w .login-panel (ukrytym na mobile ponizej) -
       ten blok jest zapasowym logo pokazywanym tylko wtedy, gdy .login-panel znika */
    .login-mobile-brand {
        display: none;
        align-items: center;
        gap: 14px;
        margin-bottom: 24px;
    }

    .login-mobile-brand .login-logo {
        width: 56px;
        height: 56px;
    }

    .login-mobile-brand .login-logo img {
        max-width: 44px;
        max-height: 44px;
    }

    .login-mobile-brand .login-product {
        font-size: 1.1rem;
    }

    .login-card-header {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 28px;
    }

    .login-card-badge {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        color: #206bc4;
        background: #eef6ff;
        border: 1px solid #dbeafe;
        flex: 0 0 auto;
    }

    .login-card h2 {
        margin: 0;
        color: #0f172a;
        font-size: 1.45rem;
        font-weight: 800;
        letter-spacing: 0;
    }

    .login-card p {
        margin: 4px 0 0;
        color: #64748b;
        line-height: 1.45;
    }

    .login-card .form-label {
        color: #334155;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .login-input-wrap {
        position: relative;
    }

    .login-input-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        color: #64748b;
        pointer-events: none;
        z-index: 2;
    }

    .login-input-wrap .form-control {
        height: 48px;
        padding-left: 44px;
        border-radius: 8px;
        border-color: #d8dee9;
        background: #f8fafc;
        color: #0f172a;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    }

    .login-input-wrap .form-control:focus {
        border-color: #206bc4;
        background: #ffffff;
        box-shadow: 0 0 0 4px rgba(32, 107, 196, 0.12);
    }

    .login-submit {
        height: 48px;
        margin-top: 22px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-weight: 750;
        box-shadow: 0 14px 28px rgba(32, 107, 196, 0.22);
    }

    .login-support {
        margin-top: 24px;
        padding-top: 22px;
        border-top: 1px solid #edf2f7;
        text-align: center;
        color: #64748b;
        font-size: 0.92rem;
    }

    .login-support a {
        color: #206bc4;
        font-weight: 700;
        text-decoration: none;
    }

    .login-support a:hover {
        text-decoration: underline;
    }

    @media (max-width: 991px) {
        .login-shell {
            width: min(680px, calc(100vw - 24px));
            min-height: auto;
            padding: 28px 0;
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .login-brand {
            margin-bottom: 28px;
        }

        .login-copy h1 {
            font-size: 2.2rem;
        }

        .login-feature-grid {
            margin-top: 24px;
        }
    }

    @media (max-width: 576px) {
        .login-shell {
            width: 100%;
            padding: 18px 12px;
            gap: 12px;
        }

        .login-panel {
            display: none;
        }

        .login-mobile-brand {
            display: flex;
        }

        .login-card {
            padding: 24px;
            margin-top: 0;
        }

        .login-card-header {
            margin-bottom: 22px;
        }
    }


/* ======================================================
 * index.tpl
 * ====================================================== */

        @import url('https://rsms.me/inter/inter.css');
        :root {
            --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
        }
        body {
            font-feature-settings: "cv03", "cv04", "cv11";
        }

        .nav-link.active {
            font-weight: bold;
            border-left: #0025ac solid 2px;
            border-radius: 0px !important;
        }

        .nav-link.active .nav-link-title {
            font-weight: bold;
        }

        .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }

        .dropdown-item.active {
            font-weight: bold;
            background-color: rgba(255, 255, 255, 0.03) !important;
            color: #ffffff !important;
            border-left: #0025ac solid 2px;
        }


        .dropdown-item:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }

        /* Fix sidebar to push logout to bottom */
        .navbar-vertical {
            display: flex !important;
            flex-direction: column !important;
            box-shadow: none !important;
        }

        @media (min-width: 992px) {
            .navbar-vertical {
                min-height: 100vh !important;
                height: 100vh !important;
                position: fixed !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                width: 15rem !important;
                scrollbar-gutter: stable !important;
            }

            .page-wrapper {
                margin-left: 15rem !important;
            }
        }

        @media (min-width: 992px) {
            .navbar-vertical .navbar-collapse {
                display: flex !important;
                flex-direction: column !important;
                flex: 1 !important;
                min-height: 0 !important;
            }

            .navbar-vertical .navbar-nav.pt-lg-3 {
                flex: 1 !important;
                overflow-y: auto !important;
                scrollbar-gutter: stable !important;
            }

            .navbar-vertical .navbar-nav.mt-auto {
                margin-top: auto !important;
                flex: 0 0 auto !important;
                padding-bottom: 1rem !important;
            }
        }

        /* Mobile responsive */
        @media (max-width: 991px) {
            .navbar-vertical {
                position: relative !important;
                height: auto !important;
                min-height: auto !important;
            }

            .navbar-vertical .container-fluid {
                padding: 0;
            }

            .navbar-brand {
                padding: 0.75rem 1rem;
            }

            /* Mobile menu optimization */
            .navbar-vertical .nav-link {
                padding: 0.75rem 1rem !important;
            }

            .navbar-vertical .dropdown-item {
                padding: 0.5rem 1rem !important;
                padding-left: 2.5rem !important;
            }

            .navbar-toggler {
                border: 1px solid rgba(255, 255, 255, 0.1);
                margin-right: 0.5rem;
            }

            /* Page wrapper adjustment */
            .page-wrapper {
                margin-left: 0 !important;
            }
        }

        /* User info section styles */
        .user-info-section {
            border-radius: 8px;
            padding: 0.75rem !important;
            margin: 0 0.75rem 0.5rem 0.75rem;
            cursor: default;
            max-width: 100%;
            box-sizing: border-box;
        }

        .user-info-section .d-flex {
            display: flex;
            align-items: center;
        }

        .user-info-section .nav-link-icon {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .user-details {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 2rem;
        }

        .user-name {
            font-weight: 600;
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 0;
            line-height: 1.5;
        }

        .user-role {
            font-size: 0.75rem;
            line-height: 1;
        }

        .user-role .badge {
            font-size: 0.7rem;
            padding: 0.2rem 0.5rem;
        }

        .avatar {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            width: 2rem;
            height: 2rem;
            flex-shrink: 0;
        }

        .avatar-sm {
            width: 2rem;
            height: 2rem;
        }

        .avatar svg {
            width: 1.25rem;
            height: 1.25rem;
            stroke: rgba(255, 255, 255, 0.8);
        }

        @media (max-width: 991px) {
            .user-info-section {
                margin: 0.5rem 1rem !important;
            }
        }

        /* Mobile content fixes */
        @media (max-width: 767px) {
            .page-header .container-xl,
            .page-body .container-xl {
                padding-left: 0 !important;
                padding-right: 0 !important;
                max-width: 100% !important;
            }

            .page-header .row,
            .page-body .row {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            .card {
                border-radius: 0 !important;
            }

            .stats-card,
            .filters-section,
            .client-info-card {
                border-radius: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
        }



/* ======================================================
 * e_n6_dashboard.tpl / e_n6_events.tpl / e_n6_event_view.tpl
 * Moduł CERT Polska n6
 * ====================================================== */

    #n6EventsTable {
        width: 100% !important;
        margin-bottom: 1rem;
    }

    #n6EventsTable td {
        vertical-align: middle;
    }

    .n6-pool-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .n6-pool-chip {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 8px 14px;
        min-width: 180px;
    }

    .n6-pool-cidr {
        font-weight: 600;
        font-size: 0.9rem;
        color: #212529;
    }

    .n6-pool-meta {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 2px;
    }

    .n6-raw-json {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 12px;
        /* Tabler nadaje elementom pre bardzo jasny kolor tekstu - wymuszamy czytelny */
        color: #212529;
        font-size: 0.8rem;
        line-height: 1.5;
        max-height: 480px;
        overflow: auto;
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
    }

    @media screen and (max-width: 768px) {
        .n6-pool-chip {
            min-width: 100%;
        }
    }

    .n6-key-preview {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 10px 14px;
    }

    .n6-key-preview code {
        font-size: 0.85rem;
        color: #212529;
        word-break: break-all;
    }

/* ======================================================
 * e_start_dashboard.tpl - historia zmian
 * ====================================================== */

    .changelog-entry-hidden {
        display: none;
    }

    #changelogList.changelog-expanded .changelog-entry-hidden {
        display: block;
    }

/* ======================================================
 * e_kasa_*.tpl - modul Kasa (KP/KW)
 * ====================================================== */

    .btn-kasa-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-kasa-view {
        background-color: #206bc4;
        border-color: #206bc4;
        color: white !important;
    }

    .btn-kasa-view:hover {
        background-color: #1a56a0;
        border-color: #1a56a0;
        color: white !important;
    }

    .btn-kasa-edit {
        background-color: #10b981;
        border-color: #10b981;
        color: white !important;
    }

    .btn-kasa-edit:hover {
        background-color: #059669;
        border-color: #059669;
        color: white !important;
    }

    .btn-kasa-delete {
        background-color: #dc3545;
        border-color: #dc3545;
        color: white !important;
    }

    .btn-kasa-delete:hover {
        background-color: #c82333;
        border-color: #bd2130;
        color: white !important;
    }

    /* Mobile cards (lista dokumentow) */
    .kasa-mobile-card {
        display: none;
    }

    .kasa-card {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .kasa-card-header {
        font-weight: 600;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .kasa-card-row {
        display: flex;
        justify-content: space-between;
        padding: 0.25rem 0;
        font-size: 0.85rem;
    }

    .kasa-card-label {
        font-weight: 500;
        color: #6c757d;
    }

    @media (max-width: 768px) {
        .table-desktop {
            display: none;
        }

        .kasa-mobile-card {
            display: block;
        }
    }

    /* Zalaczniki (miniatury zdjec/PDF) - wspolne dla formularza i podgladu dokumentu */
    .kasa-attachment-thumb {
        position: relative;
        display: inline-block;
        width: 90px;
        height: 90px;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid var(--tblr-border-color);
        cursor: pointer;
    }

    .kasa-attachment-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Kafelek PDF - brak miniatury obrazu, wiec ikona + etykieta wysrodkowane */
    .kasa-attachment-pdf {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #fff0f0;
        color: #d63939;
        text-decoration: none;
    }

    .kasa-attachment-pdf span {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .5px;
    }

    /* Wrapper w formularzu edycji - kasa-attachment-thumb jest teraz samym linkiem
       (do fslightbox/modala PDF), wiec przycisk usuwania pozycjonuje sie wzgledem tego wrappera */
    .kasa-attachment-thumb-wrap {
        position: relative;
        display: inline-block;
    }

    .kasa-attachment-remove {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 20px;
        height: 20px;
        line-height: 18px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(214, 57, 57, 0.9);
        color: #fff;
        font-size: 14px;
        cursor: pointer;
    }

    /* Historia edycji dokumentu (widok szczegolow) */
    .kasa-history-item {
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--tblr-border-color);
    }

    .kasa-history-item:last-child {
        border-bottom: none;
    }

    .kasa-history-date {
        font-size: 0.78rem;
        color: var(--tblr-secondary-color);
        margin-bottom: 0.3rem;
    }

    .kasa-history-changes {
        margin: 0;
        padding-left: 1.1rem;
        font-size: 0.85rem;
    }

    /* ==================== Dyzury (grafik dyzurow) ==================== */

    .dyzury-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }

    .dyzury-calendar-weekday {
        text-align: center;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--tblr-secondary-color);
        padding: 6px 0;
    }

    .dyzury-calendar-weekday-weekend {
        color: #d63939;
    }

    .dyzury-calendar-day {
        min-height: 92px;
        border: 1px solid var(--tblr-border-color);
        border-radius: 6px;
        padding: 6px;
        cursor: pointer;
        transition: background-color 0.15s ease;
    }

    .dyzury-calendar-day:hover {
        background-color: rgba(37, 99, 235, 0.06);
    }

    .dyzury-calendar-day-muted {
        opacity: 0.4;
    }

    .dyzury-calendar-day-weekend {
        background-color: rgba(214, 57, 57, 0.04);
    }

    .dyzury-calendar-day-today {
        border-color: #2563eb;
        box-shadow: inset 0 0 0 1px #2563eb;
    }

    .dyzury-calendar-day-number {
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .dyzury-calendar-day-shifts {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .dyzury-shift-chip {
        font-size: 0.72rem;
        padding: 2px 6px;
        border-radius: 4px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dyzury-shift-chip-notified {
        background-color: #2fb344;
    }

    .dyzury-shift-chip-pending {
        background-color: #f59f00;
    }

    .dyzury-legend {
        display: flex;
        gap: 1.25rem;
        font-size: 0.8rem;
        color: var(--tblr-secondary-color);
        flex-wrap: wrap;
    }

    .dyzury-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .dyzury-legend-swatch {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 3px;
    }

    .dyzury-legend-swatch-notified { background-color: #2fb344; }
    .dyzury-legend-swatch-pending  { background-color: #f59f00; }

    .badge-status-notified {
        background-color: rgba(47, 179, 68, 0.12);
        color: #2fb344;
        border: 1px solid rgba(47, 179, 68, 0.35);
    }

    .badge-status-pending {
        background-color: rgba(245, 159, 0, 0.12);
        color: #f59f00;
        border: 1px solid rgba(245, 159, 0, 0.35);
    }

    .badge-status-rejected {
        background-color: rgba(214, 57, 57, 0.12);
        color: #d63939;
        border: 1px solid rgba(214, 57, 57, 0.35);
    }

    .btn-dyzury-action {
        padding: 6px 12px;
        font-size: 0.875rem;
        border-radius: 6px;
        border: 1px solid;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 2px;
        cursor: pointer;
    }

    .btn-edit-dyzury {
        background-color: #10b981; border-color: #10b981; color: white !important;
    }
    .btn-edit-dyzury:hover { background-color: #059669; border-color: #059669; color: white !important; }

    .btn-delete-dyzury {
        background-color: #dc3545; border-color: #dc3545; color: white !important;
    }
    .btn-delete-dyzury:hover { background-color: #c82333; border-color: #bd2130; color: white !important; }

    .btn-toggle-dyzury {
        background-color: #6c757d; border-color: #6c757d; color: white !important;
    }
    .btn-toggle-dyzury:hover { background-color: #5a6268; border-color: #545b62; color: white !important; }

    .btn-view-zgloszenie {
        background-color: #007bff; border-color: #007bff; color: white !important;
    }
    .btn-view-zgloszenie:hover { background-color: #0056b3; border-color: #0056b3; color: white !important; }

    /* ==================== Zgloszenia (panel obslugi) ==================== */

    .zgl-timeline { list-style: none; margin: 0; padding: 0; }
    .zgl-timeline__item { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
    .zgl-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--tblr-border-color, #e6e7e9); }
    .zgl-timeline__dot { width: 14px; height: 14px; flex: none; margin-top: 4px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 4px var(--tblr-bg-surface, #fff); }
    .zgl-timeline__item--internal .zgl-timeline__dot { background: #929dab; }
    .zgl-timeline__item--status .zgl-timeline__dot { background: #206bc4; }
    .zgl-timeline__body { flex: 1; min-width: 0; }
    .zgl-timeline__note { margin-top: 4px; padding: 8px 12px; border-radius: 6px; background: var(--tblr-bg-surface-secondary, #f6f8fb); white-space: pre-line; word-break: break-word; }
    .zgl-timeline__item--internal .zgl-timeline__note { border-left: 3px solid #929dab; }

    .zgl-led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #c8d1dc; vertical-align: middle; }
    .zgl-led--on, .zgl-led--blink { background: #2fb344; box-shadow: 0 0 6px rgba(47, 179, 68, .6); }
    .zgl-led--blink { animation: zglLedBlink 1s steps(2, jump-none) infinite; }
    .zgl-led--red { background: #d63939; box-shadow: 0 0 6px rgba(214, 57, 57, .7); }
    .zgl-led--off { background: #4a5568; }
    @keyframes zglLedBlink { 0% { opacity: 1; } 100% { opacity: .25; } }
    .zgl-description { white-space: pre-line; word-break: break-word; }
    .zgl-meta-table td { padding: 2px 0; vertical-align: top; }
    .zgl-meta-table td:first-child { width: 42%; padding-right: 8px; }

    /* Dashboard: kafelki KPI z kolorowa ikona + ikona rodzaju problemu w tabeli */
    .zgl-kpi { --zgl-kpi: #206bc4; }
    .zgl-kpi--open { --zgl-kpi: #f76707; }
    .zgl-kpi--high { --zgl-kpi: #d63939; }
    .zgl-kpi--mine { --zgl-kpi: #ae3ec9; }
    .zgl-kpi--resolved { --zgl-kpi: #2fb344; }
    .zgl-kpi.zgl-kpi--active, .zgl-kpi.zgl-kpi--active:hover { border-color: var(--zgl-kpi); background: color-mix(in srgb, var(--zgl-kpi) 7%, #fff); box-shadow: inset 0 0 0 1px var(--zgl-kpi), 0 0 0 2px color-mix(in srgb, var(--zgl-kpi) 18%, transparent); }
    .zgl-kpi--active .zgl-kpi__icon { background: var(--zgl-kpi); color: #fff; }
    .zgl-kpi__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: var(--zgl-kpi); background: color-mix(in srgb, var(--zgl-kpi) 12%, transparent); }
    .zgl-kpi:hover .zgl-kpi__icon { background: var(--zgl-kpi); color: #fff; }
    .zgl-kpi .h1 { line-height: 1.1; }

    .zgl-cat { --zgl-cat: #667382; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: var(--zgl-cat); background: color-mix(in srgb, var(--zgl-cat) 12%, transparent); }
    .zgl-cat svg { width: 16px; height: 16px; }
    .zgl-cat--no_internet { --zgl-cat: #d63939; }
    .zgl-cat--slow { --zgl-cat: #f76707; }
    .zgl-cat--unstable { --zgl-cat: #f59f00; }
    .zgl-cat--wifi { --zgl-cat: #206bc4; }
    .zgl-cat--tv { --zgl-cat: #ae3ec9; }
    .zgl-cat--phone { --zgl-cat: #0ca678; }
    .zgl-cat--damage { --zgl-cat: #c2255c; }
    .zgl-cat--billing { --zgl-cat: #2fb344; }

    /* ==================== Magazyn - stany magazynowe ==================== */

    .mag-stock-kpi .card-body { padding: 1.25rem 1.5rem; }
    .mag-stock-kpi__label { font-size: .875rem; color: var(--tblr-secondary, #667382); }
    .mag-stock-kpi__value { margin: .35rem 0 .5rem; font-size: 1.75rem; font-weight: 700; line-height: 1.15; color: var(--tblr-body-color, #182433); font-variant-numeric: tabular-nums; }
    .mag-stock-kpi__value--low { color: #b45309; }
    .mag-stock-kpi__value--empty { color: #c2312b; }
    .mag-stock-kpi__hint { font-size: .8125rem; color: var(--tblr-secondary, #667382); }
    a.mag-stock-kpi { color: inherit; text-decoration: none; }

    .mag-stock__filters { padding-bottom: 1rem; border-bottom: 1px solid var(--tblr-border-color, #e6e7e9); }
    .mag-stock__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
    .mag-chip { display: inline-flex; align-items: center; gap: .35rem; padding: 6px 14px; border: 1px solid var(--tblr-border-color, #dadfe5); border-radius: 999px; background: var(--tblr-bg-surface, #fff); color: var(--tblr-body-color, #182433); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
    .mag-chip span { font-size: .75rem; opacity: .75; }
    .mag-chip:hover { border-color: #0054a6; }
    .mag-chip.is-active { background: #0054a6; border-color: #0054a6; color: #fff; }
    .mag-chip:focus-visible { outline: 2px solid #0054a6; outline-offset: 2px; }

    .mag-stock__table thead th { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tblr-secondary, #667382); white-space: nowrap; }
    .mag-stock__table td { vertical-align: middle; }
    .mag-stock__name { font-weight: 600; }
    .mag-stock__table--stock td:first-child { min-width: 180px; }
    .mag-stock__table--stock td:nth-child(2) { min-width: 110px; }
    .mag-stock__codes { margin-top: 2px; font-family: var(--tblr-font-monospace, monospace); font-size: .75rem; color: var(--tblr-secondary, #667382); }
    .mag-stock__bar-col { min-width: 165px; width: 20%; }
    .mag-stock__qty { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; font-size: .8125rem; }
    .mag-stock__qty span { color: var(--tblr-secondary, #667382); white-space: nowrap; }
    .mag-stock__money { font-family: var(--tblr-font-monospace, monospace); font-size: .8125rem; white-space: nowrap; }

    .mag-bar { position: relative; height: 6px; border-radius: 999px; background: var(--tblr-border-color-light, #eef1f4); }
    .mag-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #2f8a5b; }
    .mag-bar--low .mag-bar__fill { background: #e07b24; }
    .mag-bar--empty .mag-bar__fill { background: transparent; }
    .mag-bar__min { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--tblr-body-color, #182433); }

    .btn-mag-stock { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border: 1px solid var(--tblr-border-color, #dadfe5); border-radius: 6px; background: var(--tblr-bg-surface, #fff); color: var(--tblr-body-color, #182433); font-size: .8125rem; line-height: 1.2; text-decoration: none; cursor: pointer; }
    .btn-mag-stock:hover { border-color: #0054a6; color: #0054a6; text-decoration: none; }
    .mag-stock__actions .btn-backup-action { padding: 6px 8px; margin: 0 0 0 2px; vertical-align: middle; }
    .btn-mag-stock svg { margin-right: 4px; flex: none; }
    .btn-mag-stock--in { color: #2f8a5b; border-color: #bfe3cd; background: #f1f9f4; }
    .btn-mag-stock--in:hover { color: #fff; border-color: #2f8a5b; background: #2f8a5b; }
    .btn-mag-stock--out { color: #c25a12; border-color: #f3d3b8; background: #fdf5ee; }
    .btn-mag-stock--out:hover { color: #fff; border-color: #c25a12; background: #c25a12; }

    /* Przyjecie / wydanie w naglowku karty pozycji - zielony plus, pomaranczowy minus */
    .btn-mag-in, .btn-mag-out, .btn-positive-action { display: inline-flex; align-items: center; gap: 6px; }
    .btn-mag-in, .btn-positive-action { color: #2f8a5b; border: 1px solid #9fd3b3; background: #f1f9f4; }
    .btn-mag-in:hover, .btn-mag-in:focus, .btn-positive-action:hover, .btn-positive-action:focus { color: #fff; border-color: #2f8a5b; background: #2f8a5b; }
    .btn-mag-out { color: #c25a12; border: 1px solid #efc29c; background: #fdf5ee; }
    .btn-mag-out:hover, .btn-mag-out:focus { color: #fff; border-color: #c25a12; background: #c25a12; }

    .mag-stock__footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: var(--tblr-secondary, #667382); }

    /* Magazyn - rodzaj dokumentu jako kolorowy badge (ten sam kolor wszedzie w module) */
    .mag-type { display: inline-block; min-width: 2.6em; padding: 3px 7px; border-radius: 4px; border: 1px solid; font-family: var(--tblr-font-monospace, monospace); font-size: .6875rem; font-weight: 600; line-height: 1.2; text-align: center; }
    .mag-type--pz { color: #1f6f45; background: #e9f6ee; border-color: #b9e0c8; }
    .mag-type--wz { color: #9a4b0b; background: #fdf3ea; border-color: #f3cfae; }
    .mag-type--zw { color: #1d4ed8; background: #eaf1fd; border-color: #bcd0f5; }
    .mag-type--mont { color: #862e9c; background: #f8ecfb; border-color: #e3c3ec; }
    .mag-type--zu { color: #495057; background: #f1f3f5; border-color: #d5dbe1; }
    .mag-type--usz { color: #a5261f; background: #fdeceb; border-color: #f2c4c1; }
    .mag-type--kor { color: #7a5a00; background: #fff7e0; border-color: #f0dc9c; }

    /* Magazyn - dodatkowe kolory przyciskow ikonowych (baza: .btn-backup-action) */
    .btn-mag-act-correct { background-color: #f76707; border-color: #f76707; color: #fff !important; }
    .btn-mag-act-correct:hover { background-color: #d9480f; border-color: #d9480f; color: #fff !important; }
    .btn-mag-act-confirm { gap: 4px; background-color: #0054a6; border-color: #0054a6; color: #fff !important; }
    .btn-mag-act-confirm:hover { background-color: #003f7d; border-color: #003f7d; color: #fff !important; }
    .btn-mag-act-pdf { background-color: #fff; border-color: #dadfe5; color: #495057 !important; }
    .btn-mag-act-pdf:hover { background-color: #495057; border-color: #495057; color: #fff !important; }
    .mag-actions { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
    .mag-actions form { display: inline-flex; margin: 0; }
    .mag-actions .btn-backup-action { margin: 0; }

    /* Rozliczenie pozycji WZ (zwrot / montaz / zuzycie / uszkodzenie) */
    .btn-mag-stock--return { color: #1d4ed8; border-color: #bcd0f5; background: #f2f6fe; }
    .btn-mag-stock--return:hover { color: #fff; border-color: #1d4ed8; background: #1d4ed8; }
    .btn-mag-stock--mount { color: #862e9c; border-color: #e3c3ec; background: #faf1fc; }
    .btn-mag-stock--mount:hover { color: #fff; border-color: #862e9c; background: #862e9c; }
    .btn-mag-stock--consume { color: #495057; border-color: #d5dbe1; background: #f6f7f9; }
    .btn-mag-stock--consume:hover { color: #fff; border-color: #495057; background: #495057; }
    .btn-mag-stock--damage { color: #a5261f; border-color: #f2c4c1; background: #fdf1f0; }
    .btn-mag-stock--damage:hover { color: #fff; border-color: #a5261f; background: #a5261f; }
    .mag-settle { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px; }

    /* Magazyn - karta pozycji + zwarta historia w prawej kolumnie */
    .mag-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
    .mag-card__name { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.25; }
    .mag-card__codes { margin-top: .25rem; font-family: var(--tblr-font-monospace, monospace); font-size: .8125rem; color: var(--tblr-secondary, #667382); }
    .mag-card__badges { display: flex; gap: .4rem; flex-wrap: wrap; }
    .mag-card__stock { margin: 1.5rem 0 1.25rem; }
    .mag-card__stock .mag-stock__qty { font-size: .875rem; }
    .mag-bar--lg { height: 10px; }
    .mag-bar--lg .mag-bar__min { top: -5px; bottom: -5px; }
    .mag-card__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 1.5rem; border: 1px solid var(--tblr-border-color, #e6e7e9); border-radius: 8px; overflow: hidden; background: var(--tblr-border-color, #e6e7e9); }
    .mag-card__stats > div { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--tblr-bg-surface, #fff); }
    .mag-card__stats span { display: block; font-size: .75rem; color: var(--tblr-secondary, #667382); }
    .mag-card__stat { --mag-stat: #206bc4; }
    .mag-card__stat--min { --mag-stat: #f76707; }
    .mag-card__stat--price { --mag-stat: #ae3ec9; }
    .mag-card__stat--value { --mag-stat: #2f8a5b; }
    .mag-card__stats .mag-card__stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 10px; color: var(--mag-stat); background: color-mix(in srgb, var(--mag-stat) 12%, transparent); }
    .mag-card__stats strong { display: block; margin-top: .2rem; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
    .mag-card__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2rem; margin: 0; }
    .mag-card__details dt { font-size: .75rem; font-weight: 400; color: var(--tblr-secondary, #667382); }
    .mag-card__details dd { margin: .1rem 0 0; font-size: .875rem; word-break: break-word; }
    .mag-card__notes { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--tblr-border-color, #e6e7e9); }
    .mag-card__notes span { font-size: .75rem; color: var(--tblr-secondary, #667382); }
    .mag-card__notes p { margin: .25rem 0 0; white-space: pre-line; }

    .mag-history__body { max-height: 640px; overflow-y: auto; padding-top: .75rem; padding-bottom: .75rem; }
    .mag-history__list { margin: 0; padding: 0; list-style: none; }
    .mag-history__item { display: flex; gap: .65rem; padding: .6rem 0; border-bottom: 1px solid var(--tblr-border-color-light, #eef1f4); }
    .mag-history__main { flex: 1; min-width: 0; }
    .mag-history__dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 50%; font-size: .875rem; font-weight: 700; line-height: 1; color: #667382; background: #eef1f4; }
    .mag-history__item.is-in .mag-history__dot { color: #2f8a5b; background: #e3f4ea; }
    .mag-history__item.is-out .mag-history__dot { color: #c25a12; background: #fdeee0; }
    /* Historia operacji dokumentu - kolor kropki wg rodzaju wpisu */
    .mag-history__item--info .mag-history__dot { background: #e1ecfa; box-shadow: inset 0 0 0 5px #e1ecfa, inset 0 0 0 11px #206bc4; }
    .mag-history__item--success .mag-history__dot { background: #e3f4ea; box-shadow: inset 0 0 0 5px #e3f4ea, inset 0 0 0 11px #2f8a5b; }
    .mag-history__item--purple .mag-history__dot { background: #f5e6f9; box-shadow: inset 0 0 0 5px #f5e6f9, inset 0 0 0 11px #ae3ec9; }
    .mag-history__item--danger .mag-history__dot { background: #fde8e7; box-shadow: inset 0 0 0 5px #fde8e7, inset 0 0 0 11px #c2312b; }
    .mag-history__item--neutral .mag-history__dot { background: #eef1f4; box-shadow: inset 0 0 0 5px #eef1f4, inset 0 0 0 11px #8a96a6; }

    /* Magazyn - karta dokumentu */
    .mag-doc-state { margin-bottom: 1.25rem; padding: .65rem .9rem; border-left: 3px solid; border-radius: 6px; font-size: .8125rem; }
    .mag-doc-state--draft { border-color: #f59f00; background: #fff8e6; color: #7a4d00; }
    .mag-doc-state--posted { border-color: #2f8a5b; background: #eef8f2; color: #1f5f3e; }
    .mag-card__stats--doc strong { font-size: .95rem; }
    .mag-doc-confirm { border-left: 3px solid #206bc4; }
    .mag-doc-confirm__code { max-width: 320px; }
    .mag-attachment { display: flex; flex-direction: column; padding: .45rem 0; border-bottom: 1px solid var(--tblr-border-color-light, #eef1f4); font-size: .8125rem; word-break: break-word; }
    .mag-attachment:last-of-type { border-bottom: 0; }
    .mag-attachment span { font-size: .75rem; color: var(--tblr-secondary, #667382); }
    .mag-history__item:last-child { border-bottom: 0; }
    .mag-history__top { display: flex; justify-content: space-between; gap: .5rem; font-size: .8125rem; }
    .mag-history__type { font-weight: 600; }
    .mag-history__qty { font-family: var(--tblr-font-monospace, monospace); white-space: nowrap; color: var(--tblr-secondary, #667382); }
    .mag-history__qty.is-in { color: #2f8a5b; }
    .mag-history__qty.is-out { color: #c25a12; }
    .mag-history__meta { margin-top: .15rem; font-size: .75rem; color: var(--tblr-secondary, #667382); }
    .mag-history__meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--tblr-border-color, #dadfe5); }

    @media (max-width: 767px) {
        .mag-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .mag-card__details { grid-template-columns: 1fr; }
    }

    @media screen and (max-width: 768px) {
        .dyzury-calendar-grid { gap: 2px; }
        .dyzury-calendar-day { min-height: 64px; padding: 3px; }
        .dyzury-calendar-day-number { font-size: 0.7rem; }
        .dyzury-shift-chip { font-size: 0.65rem; }
        .btn-dyzury-action { padding: 8px; margin: 3px; min-width: 36px; min-height: 36px; }
    }

    /* ==================== Urlopy (planowanie urlopow/nieobecnosci) ==================== */

    .urlopy-chip {
        font-size: 0.72rem;
        padding: 2px 6px;
        border-radius: 4px;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: #2fb344;
    }

    .urlopy-chip-pending {
        background-color: #f59f00 !important;
    }

    .urlopy-chip-rejected {
        background-color: #d63939 !important;
        text-decoration: line-through;
        opacity: 0.75;
    }

    .urlopy-mini-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 2px;
    }

    .urlopy-mini-weekday {
        text-align: center;
        font-size: 0.62rem;
        color: var(--tblr-secondary-color);
    }

    .urlopy-mini-day {
        display: block;
        text-align: center;
        font-size: 0.68rem;
        border-radius: 3px;
        padding: 2px 0;
        color: var(--tblr-body-color);
        text-decoration: none;
    }

    .urlopy-mini-day:hover {
        outline: 1px solid #2563eb;
    }

    .urlopy-mini-day-muted {
        opacity: 0.3;
    }

    .urlopy-mini-day-today {
        font-weight: 700;
        outline: 1px solid #2563eb;
    }

/* ======================================================
 * Responsywne tabele: na telefonie wiersz = karta
 * ------------------------------------------------------
 * Uzycie: <table class="table ... table-mobile-cards">. Etykiety komorek (data-label)
 * uzupelnia dist/js/pinms_ui.js z naglowkow <th>. Role komorek na telefonie:
 *   .mc-title    - naglowek karty (np. nazwa z linkiem), bez etykiety
 *   .mc-subtitle - druga linia pod naglowkiem (np. adres IP), bez etykiety
 *   .mc-actions  - pasek przyciskow na dole karty
 *   .mc-hide     - ukryta na telefonie (mniej istotna kolumna)
 * Na desktopie tabela wyglada dokladnie tak samo jak bez tej klasy.
 * ====================================================== */
@media (max-width: 767.98px) {
    .table-responsive:has(> .table-mobile-cards) {
        overflow: visible;
    }

    .table-mobile-cards {
        display: block;
        width: 100%;
        margin-bottom: 0;
        border: 0;
    }

    .table-mobile-cards thead {
        display: none;
    }

    .table-mobile-cards tbody {
        display: grid;
        gap: .75rem;
    }

    .table-mobile-cards tbody tr {
        display: block;
        padding: .9rem 1rem .75rem;
        border: 1px solid var(--tblr-border-color, #e6e7e9);
        border-radius: 10px;
        background: var(--tblr-bg-surface, #fff);
        box-shadow: 0 1px 2px rgba(24, 36, 51, .04);
    }

    /* Paski i podswietlenie wierszy z Tablera nie pasuja do kart */
    .table-mobile-cards > tbody > tr > * {
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Etykieta przypieta po lewej, tresc komorki (tekst, badge, druga linia) plynie
       normalnie w prawej kolumnie - bez rozbijania zawartosci na osobne elementy siatki */
    .table-mobile-cards tbody td {
        display: block;
        position: relative;
        min-height: 1.9rem;
        padding: .35rem 0 .35rem calc(38% + .75rem);
        border: 0;
        text-align: left !important;
        white-space: normal;
        word-break: break-word;
    }

    .table-mobile-cards tbody td::before {
        content: attr(data-label);
        position: absolute;
        top: .45rem;
        left: 0;
        width: 38%;
        font-size: .75rem;
        font-weight: 500;
        line-height: 1.3;
        color: var(--tblr-secondary, #667382);
    }

    .table-mobile-cards tbody td.mc-title {
        display: block;
        min-height: 0;
        padding: 0 0 .1rem;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.3;
    }

    /* Dodatkowe linie w tytule karty (np. "ifIndex 1") - zwykla waga i kolor pomocniczy */
    .table-mobile-cards tbody td.mc-title .small,
    .table-mobile-cards tbody td.mc-title .text-muted,
    .table-mobile-cards tbody td.mc-title .text-secondary {
        font-weight: 400;
        font-size: .8125rem;
    }

    .table-mobile-cards tbody td.mc-subtitle {
        display: block;
        min-height: 0;
        padding: 0 0 .5rem;
        margin-bottom: .35rem;
        border-bottom: 1px solid var(--tblr-border-color-light, #eef1f4);
        font-size: .8125rem;
        color: var(--tblr-secondary, #667382);
    }

    .table-mobile-cards tbody td.mc-actions {
        display: flex;
        padding-left: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .5rem;
        margin-top: .5rem;
        padding-top: .75rem;
        border-top: 1px solid var(--tblr-border-color-light, #eef1f4);
    }

    /* Pole dotyku min. 44 px (WCAG 2.5.5 / wytyczne Apple i Google) */
    .table-mobile-cards tbody td.mc-actions .btn-backup-action,
    .table-mobile-cards tbody td.mc-actions .btn {
        min-width: 44px;
        min-height: 44px;
        margin: 0;
    }

    .table-mobile-cards tbody td.mc-title::before,
    .table-mobile-cards tbody td.mc-subtitle::before,
    .table-mobile-cards tbody td.mc-actions::before,
    .table-mobile-cards tbody td[data-label=""]::before,
    .table-mobile-cards tbody td[colspan]::before {
        content: none;
    }

    .table-mobile-cards tbody td[data-label=""],
    .table-mobile-cards tbody td[colspan] {
        display: block;
        padding-left: 0;
    }

    .table-mobile-cards tbody td.mc-hide {
        display: none;
    }

    /* Menu "⋮" w prawym gornym rogu karty (budowane przez pinms_ui.js z przyciskow akcji) */
    .table-mobile-cards tbody tr.mc-has-menu {
        position: relative;
    }

    .table-mobile-cards tbody tr.mc-has-menu td.mc-title {
        padding-right: 2.75rem;
    }

    .table-mobile-cards tbody tr.mc-has-menu td.mc-actions {
        position: absolute;
        top: .45rem;
        right: .4rem;
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .table-mobile-cards tbody tr.mc-has-menu td.mc-actions > :not(.mc-menu) {
        display: none !important;
    }

    .mc-menu {
        display: block;
        position: relative;
    }

    .mc-menu__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--tblr-secondary, #667382);
        cursor: pointer;
    }

    .mc-menu__toggle:hover,
    .mc-menu.is-open .mc-menu__toggle {
        background: var(--tblr-bg-surface-secondary, #f1f3f6);
        color: var(--tblr-body-color, #182433);
    }

    .mc-menu__toggle:focus-visible,
    .mc-menu__item:focus-visible {
        outline: 2px solid #0054a6;
        outline-offset: 1px;
    }

    .mc-menu__list {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        z-index: 30;
        min-width: 210px;
        padding: .35rem;
        border: 1px solid var(--tblr-border-color, #e6e7e9);
        border-radius: 10px;
        background: var(--tblr-bg-surface, #fff);
        box-shadow: 0 10px 30px rgba(24, 36, 51, .14);
    }

    .mc-menu__list[hidden] {
        display: none;
    }

    .mc-menu__item {
        display: flex;
        align-items: center;
        gap: .65rem;
        width: 100%;
        min-height: 44px;
        padding: .55rem .75rem;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: var(--tblr-body-color, #182433);
        font-size: .875rem;
        text-align: left;
        cursor: pointer;
    }

    /* Pozycja bez ikony - tekst w jednej linii z pozostalymi */
    .mc-menu__item:not(:has(svg)) {
        padding-left: calc(.75rem + 16px + .65rem);
    }

    .mc-menu__item svg {
        flex: none;
        color: var(--tblr-secondary, #667382);
    }

    .mc-menu__item:hover,
    .mc-menu__item:focus {
        background: var(--tblr-bg-surface-secondary, #f1f3f6);
    }

    .mc-menu__item--danger,
    .mc-menu__item--danger svg {
        color: #c2312b;
    }

    .mc-menu__item--danger:hover,
    .mc-menu__item--danger:focus {
        background: #fdeceb;
    }

    .mc-menu__divider {
        height: 1px;
        margin: .3rem .25rem;
        background: var(--tblr-border-color, #e6e7e9);
    }
}

/* Pasek akcji naglowka (.mobile-actions): na telefonie elementy [data-mobile-overflow]
   przechodza do menu "⋮" (pinms_ui.js), widoczne zostaja tylko najwazniejsze przyciski */
@media (max-width: 767.98px) {
    .mobile-actions [data-mobile-overflow] {
        display: none !important;
    }

    .mobile-actions > .mc-menu .mc-menu__toggle {
        width: 40px;
        height: 40px;
        border: 1px solid var(--tblr-border-color, #dadfe5);
        border-radius: 6px;
        background: var(--tblr-bg-surface, #fff);
    }
}

/* Na desktopie menu "⋮" nie jest potrzebne - zostaja zwykle przyciski w kolumnie Akcje */
@media (min-width: 768px) {
    .mc-menu {
        display: none;
    }
}

/* ======================================================
 * OLT Huawei - karta urzadzenia (?site=olt_huawei&action=view, e_olt_view.tpl)
 * ====================================================== */
#oltViewRoot .olt-overview-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 12px;
    color: #206bc4;
    background: color-mix(in srgb, #206bc4 12%, transparent);
}

#oltViewRoot .olt-overview-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1.25rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 8px;
    overflow: hidden;
    background: var(--tblr-border-color, #e6e7e9);
}

#oltViewRoot .olt-overview-meta > div {
    padding: .75rem 1rem;
    background: var(--tblr-bg-surface, #fff);
}

#oltViewRoot .olt-overview-meta span {
    display: block;
    font-size: .75rem;
    color: var(--tblr-secondary, #667382);
}

#oltViewRoot .olt-overview-meta strong {
    display: block;
    margin-top: .15rem;
    font-size: .9rem;
    word-break: break-word;
}

/* Plyty: siatka dopasowana do szerokosci karty zamiast stalej liczby w rzedzie */
#oltViewRoot .board-slot-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

#oltViewRoot .board-slot-card {
    width: auto;
}

#oltViewRoot .olt-board-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    font-size: .75rem;
    color: var(--tblr-secondary, #667382);
}

#oltViewRoot .olt-board-legend span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

#oltViewRoot .olt-board-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 2px dashed #ced4da;
}

#oltViewRoot .olt-board-legend__dot--active {
    border: 2px solid #5cb85c;
}

#oltViewRoot .olt-board-legend__dot--standby {
    border: 2px solid #4a90d9;
}

/* Komunikacja: zarzadzanie + SNMP */
#oltViewRoot .olt-comm + .olt-comm {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tblr-border-color-light, #eef1f4);
}

#oltViewRoot .olt-comm__head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

#oltViewRoot .olt-comm__dot {
    width: 10px;
    height: 10px;
    flex: none;
    margin-top: .4rem;
    border-radius: 50%;
    background: #c8d1dc;
}

#oltViewRoot .olt-comm__dot.is-ok { background: #2fb344; box-shadow: 0 0 0 3px color-mix(in srgb, #2fb344 20%, transparent); }
#oltViewRoot .olt-comm__dot.is-warning { background: #f59f00; box-shadow: 0 0 0 3px color-mix(in srgb, #f59f00 20%, transparent); }
#oltViewRoot .olt-comm__dot.is-error { background: #d63939; box-shadow: 0 0 0 3px color-mix(in srgb, #d63939 20%, transparent); }

#oltViewRoot .olt-comm__info {
    flex: 1;
    min-width: 0;
}

#oltViewRoot .olt-comm__address {
    margin-top: .25rem;
    font-size: .875rem;
}

#oltViewRoot .olt-comm__meta {
    margin-top: .1rem;
    font-size: .75rem;
    color: var(--tblr-secondary, #667382);
}

#oltViewRoot .olt-comm__head .btn {
    flex: none;
}

/* Kroki testu polaczenia - zostaja na stronie (nie znikajacy dymek) */
#oltViewRoot .olt-test-steps {
    margin: .75rem 0 0;
    padding: .6rem .75rem .6rem 1.9rem;
    border-radius: 8px;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
    font-size: .8125rem;
    list-style: none;
}

#oltViewRoot .olt-test-steps li {
    position: relative;
    padding: .15rem 0;
}

#oltViewRoot .olt-test-steps li::before {
    content: "";
    position: absolute;
    left: -1.15rem;
    top: .55rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2fb344;
}

#oltViewRoot .olt-test-steps li.is-warning::before { background: #f59f00; }
#oltViewRoot .olt-test-steps li.is-error::before { background: #d63939; }
#oltViewRoot .olt-test-steps li.is-warning,
#oltViewRoot .olt-test-steps li.is-error { font-weight: 600; }

/* Jakosc sygnalu ONT */
#oltViewRoot .olt-signal-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

#oltViewRoot .olt-signal-stat {
    padding: .9rem 1rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-left: 4px solid #8a96a6;
    border-radius: 8px;
}

#oltViewRoot .olt-signal-stat span {
    display: block;
    font-size: .75rem;
    color: var(--tblr-secondary, #667382);
}

#oltViewRoot .olt-signal-stat strong {
    display: block;
    margin-top: .2rem;
    font-size: 1.5rem;
    line-height: 1.2;
}

#oltViewRoot .olt-signal-stat--good { border-left-color: #2fb344; }
#oltViewRoot .olt-signal-stat--good strong { color: #2f8a5b; }
#oltViewRoot .olt-signal-stat--warning { border-left-color: #f59f00; }
#oltViewRoot .olt-signal-stat--warning strong { color: #b45309; }
#oltViewRoot .olt-signal-stat--critical { border-left-color: #d63939; }
#oltViewRoot .olt-signal-stat--critical strong { color: #c2312b; }

@media (max-width: 991.98px) {
    #oltViewRoot .olt-overview-meta,
    #oltViewRoot .olt-signal-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    #oltViewRoot .olt-overview-actions {
        width: 100%;
    }

    #oltViewRoot .olt-overview-actions > .btn-primary {
        flex: 1 1 auto;
    }

    #oltViewRoot .board-slot-row {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }
}

/* ======================================================
 * Urzadzenia - sesje BGP (e_devices_view.tpl + dist/js/devices_live.js)
 * ====================================================== */
.bgp-tone--ok { --bgp-tone: #2fb344; }
.bgp-tone--warn { --bgp-tone: #f59f00; }
.bgp-tone--progress { --bgp-tone: #206bc4; }
.bgp-tone--idle { --bgp-tone: #8a96a6; }
.bgp-tone--error { --bgp-tone: #d63939; }

.bgp-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--bgp-tone, #8a96a6);
}

.bgp-toolbar .bgp-search {
    width: 210px;
}

.bgp-seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: 8px;
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
}

.bgp-seg__btn {
    padding: 5px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tblr-secondary, #667382);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.bgp-seg__btn span {
    margin-left: .2rem;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}

.bgp-seg__btn.is-active {
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #182433);
    box-shadow: 0 1px 2px rgba(24, 36, 51, .12);
}

.bgp-seg__btn:focus-visible {
    outline: 2px solid #0054a6;
    outline-offset: 1px;
}

.bgp-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.bgp-refresh.is-loading svg {
    animation: bgpSpin 1s linear infinite;
}

@keyframes bgpSpin {
    to { transform: rotate(360deg); }
}

/* Podsumowanie */
.bgp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.bgp-stat {
    padding: .8rem 1rem;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 8px;
}

.bgp-stat > span,
.bgp-stat > small {
    display: block;
    font-size: .75rem;
    color: var(--tblr-secondary, #667382);
}

.bgp-stat strong {
    display: block;
    margin: .15rem 0;
    font-size: 1.5rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.bgp-stat em {
    font-size: .875rem;
    font-style: normal;
    font-weight: 500;
    color: #2f8a5b;
}

.bgp-stat--ok strong { color: #2f8a5b; }
.bgp-stat--problem strong.text-danger { color: #c2312b !important; }

/* Rozklad stanow */
.bgp-dist {
    margin-bottom: 1.25rem;
}

.bgp-dist__bar {
    display: flex;
    gap: 2px;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--tblr-border-color-light, #eef1f4);
}

.bgp-dist__seg {
    min-width: 6px;
    background: var(--bgp-tone);
}

.bgp-dist__legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--tblr-secondary, #667382);
}

.bgp-dist__item {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.bgp-dist__item strong {
    color: var(--tblr-body-color, #182433);
}

/* Grupy i wiersze sesji */
.bgp-group + .bgp-group {
    margin-top: 1.25rem;
}

.bgp-group__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}

.bgp-group__head h5 {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
}

.bgp-group__note {
    font-size: .75rem;
    color: var(--tblr-secondary, #667382);
}

.bgp-group__count {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
}

.bgp-group__count.is-ok { background: #e3f4ea; color: #1f6f45; }
.bgp-group__count.is-warn { background: #fdf0e1; color: #9a4b0b; }

.bgp-group__rows {
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 10px;
    overflow: hidden;
}

.bgp-row {
    display: grid;
    grid-template-columns: 128px minmax(150px, 1.3fr) 100px minmax(130px, 1fr) minmax(170px, 1.4fr) auto;
    align-items: center;
    gap: 1rem;
    padding: .7rem 1rem;
    border-left: 3px solid transparent;
    background: var(--tblr-bg-surface, #fff);
}

.bgp-row + .bgp-row {
    border-top: 1px solid var(--tblr-border-color-light, #eef1f4);
}

.bgp-row--warn,
.bgp-row--error {
    border-left-color: var(--bgp-tone);
    background: color-mix(in srgb, var(--bgp-tone) 4%, var(--tblr-bg-surface, #fff));
}

.bgp-row--warn { --bgp-tone: #f59f00; }
.bgp-row--error { --bgp-tone: #d63939; }
.bgp-row--idle { border-left-color: #c8d1dc; }

.bgp-row__state {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    font-weight: 600;
}

.bgp-row__peer strong {
    display: block;
    font-size: .875rem;
}

.bgp-row__peer small,
.bgp-row__uptime small,
.bgp-row__prefix-line small,
.bgp-row__maps {
    display: block;
    font-size: .75rem;
    color: var(--tblr-secondary, #667382);
}

.bgp-row__prefix-line small {
    display: inline;
}

.bgp-as {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: 6px;
    font-family: var(--tblr-font-monospace, monospace);
    font-size: .75rem;
    color: var(--tblr-body-color, #182433);
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
}

a.bgp-as--public {
    border-color: #bcd0f5;
    color: #1d4ed8;
    background: #eef3fd;
    text-decoration: none;
}

a.bgp-as--public:hover {
    border-color: #1d4ed8;
    text-decoration: none;
}

.bgp-row__uptime strong {
    display: block;
    font-size: .875rem;
    font-weight: 500;
}

.bgp-row__prefix-line strong {
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.bgp-fulltable {
    display: inline-block;
    margin-left: .4rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .6875rem;
    font-weight: 600;
    color: #862e9c;
    background: #f5e6f9;
}

.bgp-bar {
    display: block;
    height: 4px;
    margin-top: .35rem;
    border-radius: 999px;
    background: var(--tblr-border-color-light, #eef1f4);
}

.bgp-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #206bc4;
}

.bgp-row__actions .btn-backup-action {
    margin: 0;
}

@media (max-width: 1199.98px) {
    .bgp-row {
        grid-template-columns: 118px minmax(140px, 1fr) 92px minmax(150px, 1fr) auto;
    }

    .bgp-row__uptime {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .bgp-toolbar {
        width: 100%;
    }

    .bgp-toolbar .bgp-search {
        flex: 1 1 100%;
        width: auto;
    }

    .bgp-seg {
        flex: 1 1 auto;
    }

    .bgp-seg__btn {
        flex: 1 1 auto;
        padding: 6px 8px;
    }

    .bgp-refresh__label {
        display: none;
    }

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

    /* Na telefonie wiersz sesji jako mala karta: IP + szczegoly u gory, stan + AS, reszta pod spodem */
    .bgp-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "peer actions"
            "state as"
            "uptime uptime"
            "prefixes prefixes";
        gap: .35rem .75rem;
    }

    .bgp-row__peer { grid-area: peer; }
    .bgp-row__actions { grid-area: actions; }
    .bgp-row__state { grid-area: state; }
    .bgp-row__as { grid-area: as; justify-self: end; }
    .bgp-row__uptime { grid-area: uptime; display: flex; gap: .5rem; align-items: baseline; }
    .bgp-row__uptime small { display: inline; }
    .bgp-row__prefixes { grid-area: prefixes; }
}

/* ======================================================
 * Dude - karta map (e_dude_view.tpl)
 * ====================================================== */
.dude-maps-card .card-header {
    flex-wrap: wrap;
    gap: .5rem;
}

.dude-selected-count {
    display: inline-block;
    min-width: 1.5rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

#btnDudeSelectedToSmokeping:disabled {
    opacity: .55;
}

.dude-map-nav-wrap {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    background: var(--tblr-bg-surface-secondary, #f6f8fb);
}

.dude-map-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.dude-map-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .75rem;
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: 999px;
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #182433);
    font-size: .8125rem;
    font-weight: 500;
    white-space: nowrap;
}

.dude-map-nav .nav-link:hover {
    border-color: #2fb344;
    color: #1f7a30;
}

.dude-map-nav__count {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--tblr-bg-surface-secondary, #eef1f4);
    color: var(--tblr-secondary, #667382);
    font-size: .6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* !important - globalna regula .nav-link.active (menu boczne) zeruje zaokraglenie i dokleja lewa ramke */
.dude-map-nav .nav-link.active {
    border: 1px solid #2fb344 !important;
    border-radius: 999px !important;
    background: #2fb344;
    color: #fff;
    font-weight: 600;
}

.dude-map-nav .nav-link.active .dude-map-nav__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.dude-map-nav .nav-link.dude-map-nav__nomap:not(.active) {
    border-style: dashed;
    color: var(--tblr-secondary, #667382);
}

@media (max-width: 767.98px) {
    #btnDudeSelectedToSmokeping {
        width: 100%;
        justify-content: center;
    }

    .dude-map-nav-wrap {
        padding: .6rem .75rem;
    }
}