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


/* ======================================================
 * 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; }

/* ======================================================
 * 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_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;
        }

        /* Zakladki map Dude - zawijaj zamiast ucinac przy przewijaniu w bok */
        .dude-map-tabs {
            flex-wrap: wrap !important;
            overflow-x: visible !important;
        }

        .dude-map-tabs .nav-link {
            padding: 0.4rem 0.6rem;
            font-size: 0.85rem;
        }

        /* 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;
    }

    .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;
    }

    @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);
    }

    .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-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;
        }

        @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;
    }