.dashboard-wrapper {
    --dashboard-table-head-height: 32px;
    --dashboard-table-row-height: 26px;
    width: 100%;
    height: auto;
    flex: 1;
    min-height: 0;
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #f4f6f9;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
    font-size: 12px;
}

/* SmartBox-aligned dashboard summary. */
.dashboard-summary-page{width:100%;min-height:100%;display:flex;flex-direction:column;gap:16px;background:transparent!important;overflow:visible!important}
.dashboard-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin:0!important;padding:0 0 4px!important;border:0!important;background:transparent!important;box-shadow:none!important}
.dashboard-page-head h1{margin:0;font-size:25px;line-height:1.2;font-weight:800}
.dashboard-page-head p{margin:5px 0 0;color:var(--nm-muted);font-size:12px}
.dashboard-btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border:1px solid var(--nm-border-strong);border-radius:8px;background:#fff;color:#425361;font-size:11px;font-weight:750;text-decoration:none;cursor:pointer;transition:.15s}
.dashboard-btn:hover{border-color:#a9cfc3;background:#fbfefd;color:var(--nm-primary-dark);box-shadow:0 3px 10px rgba(16,35,50,.06)}
.dashboard-btn:disabled{opacity:.55;cursor:wait}
.dashboard-btn-small{min-height:28px;padding:4px 8px;font-size:10px}
.dashboard-primary-stats{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:11px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.dashboard-stat-card{position:relative;min-height:88px;display:flex;flex-direction:column;justify-content:center;padding:14px 16px;background:#fff;border:1px solid var(--nm-border);border-radius:12px;box-shadow:var(--nm-shadow);overflow:hidden}
.dashboard-stat-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#8796a1}
.dashboard-stat-card::after{content:"";position:absolute;right:14px;top:14px;width:9px;height:9px;border-radius:50%;background:#8796a1;box-shadow:0 0 0 4px #f0f3f5}
.dashboard-stat-card strong{font-size:27px;line-height:1;color:var(--nm-heading);letter-spacing:-.04em}
.dashboard-stat-card span{margin-top:7px;color:var(--nm-muted);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.035em}
.dashboard-stat-card.online::before,.dashboard-stat-card.online::after{background:#18a66f}.dashboard-stat-card.online::after{box-shadow:0 0 0 4px #e7f8f1}
.dashboard-stat-card.warning::before,.dashboard-stat-card.warning::after{background:#e6a11d}.dashboard-stat-card.warning::after{box-shadow:0 0 0 4px #fff5dd}
.dashboard-stat-card.offline::before,.dashboard-stat-card.offline::after{background:#dc4c55}.dashboard-stat-card.offline::after{box-shadow:0 0 0 4px #fdebed}
.dashboard-stat-card.passive::before{background:#8796a1}
.dashboard-insights{display:grid!important;grid-template-columns:minmax(300px,.85fr) minmax(420px,1.45fr)!important;gap:14px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.dashboard-card{background:#fff;border:1px solid var(--nm-border);border-radius:12px;box-shadow:var(--nm-shadow);padding:16px}
.dashboard-chart-card{height:225px;min-height:225px;flex:0 0 225px;display:flex;flex-direction:column}
.dashboard-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.dashboard-card-head h2{margin:0;font-size:13px;font-weight:600}.dashboard-card-head small{display:block;margin-top:3px;color:var(--nm-muted);font-size:9px}
.dashboard-chart-summary{text-align:right}.dashboard-chart-summary strong{display:block;color:var(--nm-primary-dark);font-size:20px;line-height:1}.dashboard-chart-summary small{max-width:110px}
.dashboard-donut-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(150px,210px) 1fr;align-items:center;gap:22px;padding:2px 10px 8px}
.dashboard-donut{position:relative;width:min(132px,100%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;margin:auto;box-shadow:inset 0 0 0 1px rgba(16,35,50,.04)}
.dashboard-donut::before{content:"";position:absolute;inset:23%;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--nm-border)}
.dashboard-donut>div{position:relative;z-index:1;text-align:center}.dashboard-donut strong,.dashboard-donut span{display:block}.dashboard-donut strong{font-size:25px}.dashboard-donut span{color:var(--nm-muted);font-size:9px;font-weight:800}
.dashboard-donut-legend{display:grid;gap:5px}.dashboard-legend-row{display:grid;grid-template-columns:9px 1fr auto;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #edf1f3}.dashboard-legend-row>span{width:8px;height:8px;border-radius:50%}.dashboard-legend-row small{margin:0;color:#596a76;font-size:10px}.dashboard-legend-row strong{font-size:11px}
.dashboard-line-chart{flex:1;min-height:0}.dashboard-line-chart svg{width:100%;height:100%;overflow:visible}.dashboard-line-chart text{fill:#85939d;font-size:9px}.dashboard-chart-axis{stroke:#dfe7ea;stroke-width:1}.dashboard-chart-grid{stroke:#edf2f3;stroke-width:1;stroke-dasharray:3 4}.dashboard-chart-y-label{font-size:8px!important;font-weight:700}.dashboard-chart-area{fill:rgba(7,140,104,.09)}.dashboard-chart-line{fill:none;stroke:var(--nm-primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.dashboard-line-chart circle{fill:#fff;stroke:var(--nm-primary);stroke-width:3;cursor:pointer}
.dashboard-alarms-card{min-height:200px;flex:1 1 220px;display:flex;flex-direction:column;padding:0;overflow:hidden}.dashboard-alarms-card>.dashboard-card-head{flex:none;align-items:center;margin:0;padding:15px 16px;border-bottom:1px solid var(--nm-border)}
.dashboard-table-wrap{flex:1;min-height:0;overflow:auto}.dashboard-table{width:100%;border-collapse:separate;border-spacing:0;font-size:11px}.dashboard-table th{position:sticky;top:0;z-index:1;background:#f7f9fa;color:#64737e;padding:10px 11px;text-align:left;white-space:nowrap;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.025em}.dashboard-table td{height:44px;padding:8px 11px;border-top:1px solid #edf1f3;white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.dashboard-table tbody tr:hover{background:#f8fbfa}
.dashboard-badge{display:inline-flex;padding:3px 8px;border-radius:999px;background:#e9eef1;color:#596a76;font-size:8px;font-weight:900}.dashboard-badge.HIGH,.dashboard-badge.CRITICAL,.dashboard-badge.ACTIVE{background:#fde7e8;color:#bb343d}.dashboard-badge.MEDIUM,.dashboard-badge.WARNING,.dashboard-badge.ACKNOWLEDGED{background:#fff1ce;color:#9a6410}.dashboard-badge.LOW,.dashboard-badge.RESOLVED{background:#dcf7e9;color:#08784d}.dashboard-empty{text-align:center!important;color:var(--nm-muted);padding:34px!important}
@media(max-width:1100px){.dashboard-primary-stats{grid-template-columns:repeat(3,1fr)!important}.dashboard-insights{grid-template-columns:1fr!important}}
@media(max-width:680px){.dashboard-primary-stats{grid-template-columns:repeat(2,1fr)!important}.dashboard-donut-layout{grid-template-columns:1fr}.dashboard-page-head{flex-direction:column}.dashboard-page-head .dashboard-btn{align-self:flex-end}}

.dashboard-wrapper *,
.dashboard-wrapper *::before,
.dashboard-wrapper *::after {
    box-sizing: inherit;
}

/* ===== STAT KÁRTYÁK ===== */

.stats-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
    height: 54px;
}

.stat-card {
    flex: 1;
    background: #ffffff;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 6px solid #cccccc;
}

.stat-card.blue {
    border-left-color: #007bff;
}

.stat-card.green {
    border-left-color: #28a745;
}

.stat-card.red {
    border-left-color: #dc3545;
}

.stat-card.yellow {
    border-left-color: #ffff00;
}

.stat-card.gray {
    border-left-color: #6c757d;
}

.stat-info h4 {
    margin: 0;
    font-size: 11px;
    color: #666666;
    text-transform: uppercase;
    font-weight: 600;
}

.stat-info p {
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: bold;
    color: #333333;
}

.stat-icon {
    font-size: 28px;
    opacity: 0.2;
}

/* ===== CHART / LOG SOR ===== */

.chart-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    height: 190px;
    flex-shrink: 0;
}

.chart-container {
    background: #ffffff;
    border-radius: 6px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    overflow: hidden;
}

.type-chart {
    flex: 0 0 330px;
}

.status-chart {
    flex: 1.05;
    min-width: 320px;
}

.pie-chart {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: conic-gradient(#cccccc 0% 100%);
    flex-shrink: 0;
}

.chart-legend {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10.5px;
    line-height: 1.18;
    max-height: 100%;
    overflow-y: auto;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 1px 3px;
    border-radius: 4px;
    cursor: pointer;
    color: #333333;
    text-align: left;
}

.legend-item:hover {
    background: #f0f3f6;
}

.legend-color {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.log-panel {
    border-top: 4px solid #dc3545;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
    min-width: 320px;
    align-items: stretch;
    justify-content: flex-start;
}

.log-header {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 6px;
    color: #dc3545;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.log-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
}

.log-search {
    padding: 3px 7px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 12px;
    width: 130px;
    font-weight: normal;
}

.log-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.log-table th {
    background: #f1f1f1;
    color: #333333;
    height: 25px;
    font-size: 11px;
    padding: 4px;
    position: sticky;
    top: 0;
    z-index: 5;
    text-align: left;
}

.log-table td {
    height: 25px;
    font-size: 11px;
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #eeeeee;
}

/* ===== MAIN LAYOUT ===== */

.main-content {
    display: flex;
    gap: 10px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.main-content.details-open #device_table th:nth-child(8),
.main-content.details-open #device_table td:nth-child(8),
.main-content.details-open #type_table th:nth-child(7),
.main-content.details-open #type_table td:nth-child(7) {
    display: none;
}

.left-panel-wrapper {
    flex: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.panel-box {
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.table-container-scroll {
    overflow: hidden;
    flex: 1;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    margin-bottom: 10px;
    min-height: 0;
}

/* ===== TAB / FILTER SOR ===== */

.controls-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
}

.tabs {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.tab-btn {
    padding: 6px 12px;
    background: #e9ecef;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    color: #555555;
    transition: 0.2s;
    font-size: 12px;
}

.tab-btn.active {
    background: #007bff;
    color: #ffffff;
}

.search-box {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-grow: 1;
    justify-content: flex-end;
}

.search-box input,
.search-box select {
    padding: 5px 7px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 12px;
    height: 30px;
}

.search-box input {
    width: 170px;
}

.device-filters,
.type-buttons,
.chart-actions,
.bar-custom-dates {
    display: flex;
    align-items: center;
    gap: 7px;
}

.type-buttons {
    display: none;
}

.chart-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 12px;
}

.status-chart {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.chart-actions select,
.chart-actions input {
    height: 28px;
    padding: 4px 7px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    font-size: 12px;
}

#bar_chart_svg_holder {
    flex: 1;
    min-height: 0;
    width: 100%;
}

.tab-pane {
    display: none;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    min-height: 0;
}

.tab-pane.active {
    display: flex;
}

/* ===== TÁBLÁK ===== */

table.main-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

table.main-table th {
    position: sticky;
    top: 0;
    background-color: #343a40;
    color: #ffffff;
    z-index: 10;
    padding: 0 7px;
    height: var(--dashboard-table-head-height);
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

table.main-table th:hover {
    background-color: #23272b;
}

table.main-table th::after {
    content: '↕';
    float: right;
    opacity: 0.3;
    font-size: 12px;
}

table.main-table td {
    max-width: 200px;
    padding: 0 7px;
    border-bottom: 1px solid #dee2e6;
    color: #495057;
    vertical-align: middle;
    height: var(--dashboard-table-row-height);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.15;
}

table.main-table .btn-sm {
    height: 22px;
    min-height: 22px;
    padding: 0 6px;
    font-size: 10.5px;
    line-height: 1;
    margin-right: 3px;
}

tr.empty-row td {
    border-bottom: 1px solid #eeeeee;
    cursor: default;
}

tr:not(.empty-row):hover {
    background-color: #f8f9fa;
}

tr.selected {
    background-color: #e8f0fe !important;
    border-left: 5px solid #007bff;
}

/* ===== JOBB OLDALI RÉSZLETEK ===== */

.right-panel {
    flex: 1;
    min-width: 340px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 12px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    border-left: 4px solid #007bff;
    height: 100%;
}

.right-panel.active {
    display: flex;
    animation: slideIn 0.3s ease-out;
}

.details-header {
    border-bottom: 2px solid #007bff;
    padding-bottom: 8px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.details-header h3,
.details-header h2 {
    margin: 0;
    color: #007bff;
    font-size: 16px;
    flex: 1;
    min-width: 0;
}

.details-diagnostics-link {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid #1454b8;
    background: linear-gradient(180deg, #1f6fe5 0%, #1557bf 100%);
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(21, 87, 191, 0.22);
    transition: transform 0.14s, box-shadow 0.14s, filter 0.14s;
}

.details-diagnostics-link::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #9be7ff;
    box-shadow: 0 0 0 3px rgba(155, 231, 255, 0.22);
}

.details-diagnostics-link:hover {
    color: #ffffff;
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(21, 87, 191, 0.28);
}

.details-diagnostics-link:focus-visible {
    outline: 3px solid rgba(31, 111, 229, 0.28);
    outline-offset: 2px;
}

.close-details {
    width: 30px;
    height: 30px;
    border: 1px solid #d8e1ea;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    color: #667085;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
    flex: 0 0 auto;
}

.close-details::before {
    content: "\00d7";
    font-size: 18px;
}

.close-details:hover {
    background: #fff1f1;
    border-color: #ffc9c9;
    color: #c62828;
}

.detail-img-box {
    width: 100%;
    height: 180px;
    background: #f9f9f9;
    border: 2px dashed #cccccc;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
}

.detail-img-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.detail-row {
    display: flex;
    border-bottom: 1px solid #eeeeee;
    padding: 7px 0;
    font-size: 12px;
}

.detail-label {
    font-weight: bold;
    width: 105px;
    color: #555555;
}

.detail-value {
    flex: 1;
    color: #333333;
    word-break: break-word;
}

.detail-primary-ip{
    flex-direction: row;
}

.detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    border-top: 2px solid #eeeeee;
    padding-top: 10px;
}

.detail-section {
    padding: 0 5px 12px;
}

.detail-section-technical {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    border: 1px solid #eef0f2;
}

.detail-section small {
    display: block;
    color: #666666;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    margin-bottom: 4px;
}

.detail-section-technical small {
    color: #007bff;
}

.detail-mono {
    font-family: monospace;
}

.detail-strong {
    font-weight: 700;
}

.detail-primary-ip {
    font-family: monospace;
    font-weight: 700;
    color: #2c3e50;
}

.detail-secondary-ip {
    padding-left: 10px;
    border-left: 2px solid #cccccc;
    margin-top: 4px;
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.detail-ip-address {
    font-family: monospace;
    color: #666666;
    font-size: 12px;
}

.detail-ip-comment {
    color: #999999;
    font-size: 11px;
    margin-top: 2px;
}

.detail-rack-link {
    font-weight: 700;
    color: #007bff;
    cursor: pointer;
    text-decoration: underline;
}

.detail-password-mask {
    background: #eeeeee;
    padding: 3px 8px;
    border-radius: 3px;
    font-family: monospace;
    letter-spacing: 2px;
    min-width: 80px;
    text-align: center;
    display: inline-block;
}

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

.detail-row-column .detail-label {
    width: 100%;
}

.detail-comment {
    white-space: pre-wrap;
    margin-top: 5px;
    padding-left: 10px;
    border-left: 2px solid #dddddd;
}

.detail-attachments-section {
    margin-top: 10px;
    border-top: 2px solid #eeeeee;
    padding-top: 10px;
}

.detail-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    color: #555555;
}

.detail-attachment-list {
    font-size: 12px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #eeeeee;
}

.detail-attachment-row,
.detail-attachment-empty {
    padding: 8px 10px;
    border-bottom: 1px solid #eeeeee;
    color: #555555;
}

.detail-attachment-row:last-child {
    border-bottom: 0;
}

.detail-attachment-empty {
    color: #999999;
    font-style: italic;
}

/* ===== BADGE / STATUS ===== */

.badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    color: #ffffff;
    display: inline-block;
    min-width: 60px;
    text-align: center;
}

.badge-true {
    background-color: #28a745;
}

.badge-false {
    background-color: #dc3545;
}

.badge-partial {
    background: linear-gradient(90deg, #28a745 0%, #28a745 50%, #dc3545 50%, #dc3545 100%);
    color: #ffffff;
    min-width: 90px;
}

.badge-not-pingable {
    background-color: #ffc107;
}

.badge-passive {
    background-color: #6c757d;
}

.status-tooltip {
    position: fixed;
    display: none;
    z-index: 1000000;
    min-width: 260px;
    background: #222222;
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    font-size: 12px;
    pointer-events: none;
}

.status-tooltip-title {
    font-weight: bold;
    margin-bottom: 8px;
    color: #ffffff;
}

.status-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.status-tooltip-ip {
    font-family: monospace;
}

.status-tooltip-online {
    color: #7ee787;
    font-weight: bold;
}

.status-tooltip-offline {
    color: #ff7b72;
    font-weight: bold;
}

/* ===== PAGINATION ===== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    flex-shrink: 0;
    font-size: 12px;
}

.page-btn {
    padding: 2px 8px;
    border: 1px solid #dddddd;
    background: #ffffff;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
}

.page-btn.active {
    background: #007bff;
    color: #ffffff;
    border-color: #007bff;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-text {
    text-align: center;
    color: #666666;
    padding: 12px;
    font-style: italic;
    font-size: 13px;
}

.pie-svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
}

.pie-slice {
    cursor: pointer;
    transition: transform 0.18s ease;
}

.pie-slice:hover {
    transform: scale(1.035);
}

.chart-empty,
.legend-empty,
.empty-log-cell {
    color: #999999;
    text-align: center;
    padding: 18px 8px;
    font-size: 12px;
}

.chart-grid-line {
    stroke: #eeeeee;
    stroke-width: 1;
}

.chart-axis-line {
    stroke: #cccccc;
    stroke-width: 1.5;
}

.chart-axis-label {
    font-size: 10px;
    fill: #777777;
    font-weight: 600;
}

.chart-tooltip {
    position: fixed;
    display: none;
    z-index: 1000000;
    background: #111111;
    color: #ffffff;
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    font-size: 12px;
    pointer-events: none;
}

.log-type-badge {
    min-width: 42px;
    background: #6c757d;
}

.type-icon-picker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.type-icon-preview {
    width: 86px;
    height: 62px;
    border: 1px dashed #cccccc;
    border-radius: 6px;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 11px;
    flex-shrink: 0;
    overflow: hidden;
}

.type-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== TABLE RESIZER ===== */

th {
    position: relative;
}

.resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    cursor: col-resize;
    user-select: none;
    height: 100%;
    z-index: 1;
}

.resizer:hover {
    background-color: #007bff;
}

.resizing {
    border-right: 2px solid #007bff;
    user-select: none;
}

/* ===== PASSWORD EYE ===== */

.eye-button {
    cursor: pointer;
    color: #6c757d;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
}

.eye-button:hover {
    color: #007bff;
    background-color: #f0f8ff;
    transform: scale(1.1);
}

.detail-password-button {
    display: inline-flex;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    margin-left: 6px;
}

.detail-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.detail-attachment-name {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #007bff;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
}

.detail-attachment-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.nm-small-modal-content {
    width: 520px;
    max-height: 86vh;
}

.nm-modal-x {
    background: none;
    border: 0;
    color: #667085;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.nm-inline-form {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.class-list-container {
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    overflow-y: auto;
    max-height: 360px;
}

.class-list-item,
.class-list-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef0f2;
    font-size: 12px;
}

.class-list-item:last-child {
    border-bottom: 0;
}

.class-list-empty {
    color: #98a2b3;
    font-style: italic;
}

.export-choice-content {
    text-align: center;
}

.export-choice-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 0;
}

.export-choice-btn {
    height: 46px;
    justify-content: center;
}

.manual-ping-modal-content {
    width: 800px;
}

.manual-ping-grid {
    grid-template-columns: 1fr 1fr 1fr;
}

.manual-ping-output {
    height: 300px;
    white-space: pre-wrap;
    font-family: Consolas, monospace;
    overflow-x: auto;
}

#ping_button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.file-preview-modal {
    background: rgba(15, 23, 42, 0.86);
}

.file-preview-content {
    width: min(980px, 92vw);
    height: min(760px, 90vh);
    padding: 0;
    overflow: hidden;
    background: #1f2937;
}

.file-preview-header {
    height: 52px;
    margin: 0;
    padding: 0 14px;
    background: #ffffff;
    border-bottom: 1px solid #d0d5dd;
    font-size: 15px;
}

.file-preview-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-preview-body {
    flex: 1;
    min-height: 0;
    background: #475467;
}

.file-preview-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #ffffff;
}

@media (max-width: 900px) {
    .nm-app-header {
        height: auto;
        min-height: 54px;
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 10px;
    }

    .nm-app-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .manual-ping-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.dashboard-overview .main-content { display: none; }