/* Custom styles for Modbus Variable Monitor — uses tokens from theme.css only */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    overflow: auto;
}

body:not(.scada-theme) {
    background: var(--body-bg);
}

.navbar-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Controls Section */
body:not(.scada-theme) .controls-section {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1.5rem 0;
    box-shadow: var(--shadow-xs);
}

.controls-section .form-control {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

/* Content Section */
body:not(.scada-theme) .content-section {
    background: var(--surface-bg);
    min-height: calc(100vh - 200px);
    padding: 2rem 0;
}

/* Status Badge */
#connectionStatus {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
}

#connectionStatus.connected {
    background-color: var(--success-color) !important;
}

#connectionStatus.disconnected {
    background-color: var(--danger-color) !important;
}

#connectionStatus.loading {
    background-color: var(--warning-color) !important;
    color: var(--text-black) !important;
}

/* Table Styles */
.table {
    margin-bottom: 0;
}

/* General table header styles */
.table thead th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border-default);
}

.table tbody tr.writable {
    background-color: var(--row-writable-bg);
}

.table tbody tr.writable:hover {
    background-color: var(--row-writable-hover);
}

.table tbody tr:hover {
    background-color: var(--row-hover);
}

.variable-name {
    font-weight: 600;
    color: var(--text-secondary);
}

/* Value Display */
.value-display {
    padding: 0.5rem 0.75rem;
    background: var(--surface-subtle);
    border-radius: 0.25rem;
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-weight: 600;
    font-size: 0.95rem;
}

.value-input {
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--primary-color);
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    width: 100%;
    max-width: 200px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.value-input:focus {
    outline: none;
    border-color: var(--primary-dark);
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* Badges */
.badge-read {
    background-color: var(--badge-read-bg);
    color: var(--badge-read-text);
}

.badge-write {
    background-color: var(--badge-write-bg);
    color: var(--badge-write-text);
}

.badge-readwrite {
    background-color: var(--badge-readwrite-bg);
    color: var(--badge-readwrite-text);
}

.badge-type {
    background-color: var(--badge-type-bg);
    color: var(--badge-type-text);
    font-family: 'Courier New', monospace;
}

.badge-sign {
    background-color: var(--badge-sign-bg);
    color: var(--badge-sign-text);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.badge-length {
    background-color: var(--badge-length-bg);
    color: var(--color-success-text);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Action Buttons */
.action-buttons {
    white-space: nowrap;
}

.action-buttons .btn {
    margin-right: 0.5rem;
    display: inline-block;
}

.action-buttons .btn:last-child {
    margin-right: 0;
}

.action-buttons .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.btn-sm {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}

/* Messages */
.success {
    color: var(--success-color);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Bootstrap Tooltip Customization */
.tooltip-inner {
    max-width: 300px;
    text-align: left;
    font-size: 0.875rem;
    white-space: pre-line;
}

/* Connection Status Indicators in Value Column */
.value-display.bg-secondary {
    background-color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary-dark);
}

.value-display.bg-light {
    background-color: var(--row-hover) !important;
    border: 1px solid var(--border-default);
    color: var(--color-secondary) !important;
}

.value-display i {
    margin-right: 0.25rem;
    font-size: 0.875em;
}

/* Empty State */
#emptyState h3 {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Loading Spinner */
.spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-logo {
        height: 32px;
    }

    .controls-section,
    body:not(.scada-theme) .controls-section {
        padding: 1rem 0;
    }

    .content-section,
    body:not(.scada-theme) .content-section {
        padding: 1rem 0;
    }

    .table {
        font-size: 0.875rem;
    }

    .table-container {
        overflow-x: auto;
    }

    .value-input {
        max-width: 100%;
    }

    .action-buttons .btn {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .action-buttons .btn:last-child {
        margin-bottom: 0;
    }
}

/* Custom button styles */
.btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Performance optimization */
    will-change: transform, box-shadow;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

.btn:active {
    transform: translateY(0);
}

/* Gap utility for flexbox */
.gap-2 {
    gap: 0.5rem !important;
}

/* Spinning animation for loading icons */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Performance optimization for animations */
.spinner-border,
.btn-loading::after,
.connection-card.loading::after {
    will-change: transform;
    transform: translateZ(0);
    /* Force GPU acceleration */
}

/* Config Page Specific Styles */

/* Config Editor */
.config-editor {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    min-height: 600px;
    height: 70vh;
    width: 100%;
    resize: vertical;
    line-height: 1.5;
    padding: 1rem;
    border: 2px solid var(--border-default);
    border-radius: 0.5rem;
    /* Performance optimization */
    contain: layout style paint;
}

.config-editor:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--focus-ring);
}

/* Config Section */
.config-section {
    background: var(--row-hover);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: auto;
    /* avoid stacking context that hides dropdowns */
    overflow: visible;
}

.config-section h5 {
    color: var(--omac-navy);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border-subtle);
    padding-bottom: 0.5rem;
}

/* Validation Errors */
.validation-errors {
    max-height: 300px;
    overflow-y: auto;
}

/* JSON Editor Container */
.json-editor-container {
    position: relative;
}

.json-editor-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

/* Backup Info */
.backup-info {
    background: var(--surface-backup);
    border-left: 4px solid var(--omac-orange);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

/* Registers spreadsheet container */
#cardsSpreadsheetView,
#registersSpreadsheet {
    position: relative;
    z-index: 5;
}

/* Disabled cell styling */
.cell-disabled {
    background-color: var(--surface-disabled-alt) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.cell-disabled input,
.cell-disabled select,
.cell-disabled textarea {
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Connection Cards */
.connection-card {
    border: 1px solid var(--border-default);
    border-radius: 0.5rem;
    padding: 1.25rem;
    background: var(--surface-bg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    /* Performance optimization */
    will-change: transform, box-shadow;
    contain: layout style paint;
}

.connection-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.connection-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--surface-subtle);
}

.connection-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.connection-card-actions {
    display: flex;
    gap: 0.5rem;
}

.connection-card-body {
    font-size: 0.9rem;
}

.connection-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--row-hover);
}

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

.connection-detail-label {
    font-weight: 600;
    color: var(--color-secondary);
}

.connection-detail-value {
    color: var(--text-body);
    text-align: right;
}

.connection-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* View Toggle */
.view-toggle-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.view-toggle-btn {
    border: 1px solid var(--border-default);
}

.view-toggle-btn.active {
    background-color: var(--primary-color);
    color: var(--text-on-dark);
    border-color: var(--primary-color);
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Form Validation Styles */
.form-validation-success {
    background-color: var(--badge-length-bg);
    border-color: var(--color-success-border-alt);
    color: var(--color-success-text);
}

.form-validation-error {
    background-color: var(--badge-write-bg);
    border-color: var(--color-danger-border-alt);
    color: var(--badge-write-text);
}

.form-validation-warning {
    background-color: var(--row-writable-hover);
    border-color: var(--color-warning-border-alt);
    color: var(--color-warning-text);
}

.validation-item {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    border-left: 4px solid;
}

.validation-item.error {
    background-color: var(--badge-write-bg);
    border-left-color: var(--color-danger);
}

.validation-item.warning {
    background-color: var(--row-writable-hover);
    border-left-color: var(--color-warning);
}

.validation-item.success {
    background-color: var(--badge-length-bg);
    border-left-color: var(--color-success-dark);
}

.validation-summary {
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
}

.validation-summary.valid {
    background-color: var(--badge-length-bg);
    border: 1px solid var(--color-success-border-alt);
    color: var(--color-success-text);
}

.validation-summary.invalid {
    background-color: var(--badge-write-bg);
    border: 1px solid var(--color-danger-border-alt);
    color: var(--badge-write-text);
}

.field-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 0.2rem var(--focus-ring-danger) !important;
}

.field-error+.invalid-feedback {
    display: block;
}

.invalid-feedback {
    display: none;
    color: var(--color-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Loading States */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    /* Performance optimization */
    contain: layout style;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    /* Performance optimization */
    will-change: transform;
    transform: translateZ(0);
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--surface-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 0.5rem;
}

.loading-overlay .spinner-border {
    width: 2rem;
    height: 2rem;
}

.loading-text {
    margin-left: 0.5rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.section-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.connection-card.loading {
    position: relative;
}

.connection-card.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin: -1rem 0 0 -1rem;
    border: 2px solid var(--primary-color);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 5;
}

/* Progress indicators */
.progress-container {
    margin-bottom: 1rem;
}

.progress-container .progress {
    height: 0.5rem;
    margin-bottom: 0.5rem;
}

.progress-container .progress-text {
    font-size: 0.875rem;
    color: var(--color-secondary);
}

/* Custom table pagination (index page) */
.table-pagination {
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-default);
}

.table-pagination .page-info {
    color: var(--color-secondary);
    font-size: 0.875rem;
}

.table-pagination .pagination .page-link {
    color: var(--text-secondary);
    border-color: var(--border-default);
}

.table-pagination .pagination .page-link:hover:not(:disabled) {
    background: var(--row-hover);
    border-color: var(--border-default);
}

.table-pagination .pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}

.table-pagination .pagination .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-on-dark);
}

.table-pagination .pagination .page-ellipsis {
    pointer-events: none;
    letter-spacing: 0.1em;
}

/* Device Status Cards */
.device-card {
    transition: all 0.3s ease;
    border-left: 4px solid;
}

.device-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

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

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

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

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

.device-card .card-header {
    padding: 0.75rem 1rem;
    background: var(--gradient-surface-header);
    border-bottom: 1px solid var(--border-divider-strong);
}

.device-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.device-card .card-body {
    padding: 1rem;
}

.device-card .stat-box {
    background: var(--gradient-surface-header);
    border-radius: 6px;
    padding: 0.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
}

.device-card .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: block;
}

.device-card .stat-label {
    font-size: 0.75rem;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.device-card .btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Device status icons */
.device-status-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
}

.status-healthy {
    background-color: var(--success-color);
}

.status-warning {
    background-color: var(--warning-color);
}

.status-critical {
    background-color: var(--danger-color);
}

.status-disconnected {
    background-color: var(--color-secondary);
}

.status-unknown {
    background-color: var(--color-info);
}

/* Responsive adjustments for device cards */
@media (max-width: 768px) {
    .device-card .card-body {
        padding: 0.75rem;
    }

    .device-card .stat-box {
        padding: 0.375rem;
    }

    .device-card .stat-value {
        font-size: 1.1rem;
    }
}

/* Animation for device refresh icon */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Device Stats Cards - Health Endpoint */
#deviceStatsSection .card {
    transition: all 0.3s ease;
    border-width: 2px;
    height: 100%;
}

#deviceStatsSection .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

#deviceStatsSection .card.border-success {
    border-color: var(--success-color) !important;
}

#deviceStatsSection .card.border-warning {
    border-color: var(--warning-color) !important;
}

#deviceStatsSection .card.border-danger {
    border-color: var(--danger-color) !important;
}

#deviceStatsSection .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

#deviceStatsSection .card-title i {
    color: var(--color-secondary);
    margin-right: 0.5rem;
}

#deviceStatsSection .row.g-2 .col-6 {
    padding: 0.25rem;
}

#deviceStatsSection .small.text-muted {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

#deviceStatsSection .fw-bold {
    font-size: 0.9rem;
}

#deviceStatsSection .text-success i,
#deviceStatsSection .text-danger i {
    margin-right: 0.25rem;
}

/* Health score styling */
.health-score-high {
    color: var(--success-color) !important;
    font-weight: 700;
}

.health-score-medium {
    color: var(--warning-color) !important;
    font-weight: 700;
}

.health-score-low {
    color: var(--danger-color) !important;
    font-weight: 700;
}

/* Responsive adjustments for device stats cards */
@media (max-width: 768px) {
    #deviceStatsSection .col-md-6.col-lg-4 {
        margin-bottom: 1rem;
    }

    #deviceStatsSection .card-title {
        font-size: 1rem;
    }

    #deviceStatsSection .fw-bold {
        font-size: 0.85rem;
    }
}