/* Section Improvements - Unified Styling for All Sections */

/* Global body and html background fix - white content background */
html, body {
    background: #FFFFFF !important;
    min-height: 100vh !important;
}

/* Standardized Section Container */
.section-container,
.inventory-container,
.ui.container,
.dashboard-actual-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: transparent !important;
    min-height: 100vh;
    color: #333333;
}

/* Fix for content area background - white */
#content {
    background: #FFFFFF !important;
    min-height: 100vh !important;
}

/* Ensure content-target has proper styling when loaded via HTMX */
#content-target {
    background: transparent !important;
    width: 100% !important;
    min-height: 0;
    display: block !important;
}

/* Ensure first child of content-target has container styling if it doesn't have one */
#content-target > *:first-child:not([class*="max-w-"]):not([id*="dashboard"]):not([id*="device-detail"]) {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
}

@media (min-width: 768px) {
    #content-target > *:first-child:not([class*="max-w-"]):not([id*="dashboard"]):not([id*="device-detail"]) {
        padding: 1.5rem !important;
    }
}

/* Prevent logout button duplication - ensure only one logout button is visible */
#logout-button {
    display: flex !important;
}

/* Hide any logout buttons that might be inside content-target (should not exist) */
#content-target #logout-button,
#content-target .patitur-logout-btn,
#content-target form[action*="logout"] {
    display: none !important;
}

/* Ensure main_target container has proper styling */
#main_target {
    background: transparent !important;
    width: 100%;
    min-height: 0;
}

/* Normalize all page containers - consistent styling across all sections */
/* Ensure containers inside content-target have consistent styling */
#content-target > div[class*="max-w-7xl"],
#content-target > div[class*="max-w-"],
#content-target > div[id*="dashboard-content-wrapper"],
#content-target > div[id*="device-detail-container"],
#content-target > div[class*="mx-auto"] {
    width: 100% !important;
    max-width: 1280px !important; /* max-w-7xl equivalent */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1.25rem !important; /* p-5 equivalent */
    box-sizing: border-box !important;
    display: block !important;
}

@media (min-width: 768px) {
    #content-target > div[class*="max-w-7xl"],
    #content-target > div[class*="max-w-"],
    #content-target > div[id*="dashboard-content-wrapper"],
    #content-target > div[id*="device-detail-container"],
    #content-target > div[class*="mx-auto"] {
        padding: 1.5rem !important; /* md:p-6 equivalent */
    }
}

/* Specific fix for dashboard container when loaded via HTMX */
#content-target #dashboard-content-wrapper {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1.25rem !important;
    box-sizing: border-box !important;
    display: block !important;
}

@media (min-width: 768px) {
    #content-target #dashboard-content-wrapper {
        padding: 1.5rem !important;
    }
}

/* Ensure no duplicate containers or nested containers cause issues */
#content-target > div[class*="max-w-"] > div[class*="max-w-"] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure consistent container styling after HTMX swaps */
#content-target[style*="display"] {
    display: block !important;
}

/* Fix for container visibility issues after HTMX updates */
#main_target,
#content-target {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Standardized Section Headers */
.section-header,
.section-container h1,
.inventory-container h1,
.ui.container h1 {
    color: #00d4aa;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: none;
    border-bottom: 2px solid rgba(0, 212, 170, 0.3);
    padding-bottom: 0.5rem;
}

/* Standardized Section Subheaders */
.section-subheader,
.section-container h2,
.section-container h3,
.inventory-container h2,
.inventory-container h3 {
    color: #666666;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

/* Standardized Segments/Cards - white background with subtle styling */
.ui.segment,
.filter-section,
.action-section {
    background: #FFFFFF;
    border: 1px solid rgba(0, 212, 170, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: none;
}

.ui.segment h3,
.filter-section h3 {
    color: #00d4aa;
    font-weight: 600;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 212, 170, 0.2);
    padding-bottom: 0.5rem;
}

/* Standardized Tables - white background */
.ui.table,
.patitur-table,
table {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 212, 170, 0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    width: 100% !important;
    margin: 0 !important;
    table-layout: auto !important;
}

/* Fix table container width issues */
.table-container,
.table-container-box,
.ui.table-wrapper,
.patitur-table-container {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* Ensure table respects container margins */
.table-container table,
.table-container-box table {
    width: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.ui.table thead th,
.patitur-table thead th,
table thead th {
    background: rgba(0, 212, 170, 0.1) !important;
    color: #00d4aa !important;
    border-bottom: 1px solid rgba(0, 212, 170, 0.2) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 1rem !important;
}

.ui.table tbody td,
.patitur-table tbody td,
table tbody td {
    background: transparent !important;
    color: #333333 !important;
    padding: 1rem !important;
}

.ui.table tbody tr:hover,
.patitur-table tbody tr:hover,
table tbody tr:hover {
    background: rgba(0, 212, 170, 0.05) !important;
}

/* Standardized Buttons */
.ui.button,
.action-button,
.filter-button,
.patitur-btn {
    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%) !important;
    color: #0a1a1f !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3) !important;
}

.ui.button:hover,
.action-button:hover,
.filter-button:hover,
.patitur-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 212, 170, 0.4) !important;
}

/* Button Variants */
.ui.button.secondary,
.clear-filter {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #00b894 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ui.button.secondary:hover,
.clear-filter:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Danger Buttons */
.ui.button.red,
.delete-button {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff !important;
}

.ui.button.red:hover,
.delete-button:hover {
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.4) !important;
}

/* Form Elements */
.ui.form .field label,
.ui.form label {
    color: #666666 !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
}

.ui.form input,
.ui.form select,
.ui.form textarea,
.ui.dropdown {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 212, 170, 0.3) !important;
    color: #333333 !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
}

.ui.form input:focus,
.ui.form select:focus,
.ui.form textarea:focus,
.ui.dropdown:focus {
    border-color: #00d4aa !important;
    box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.2) !important;
    background: #FFFFFF !important;
}

.ui.form input::placeholder,
.ui.form textarea::placeholder {
    color: #999999 !important;
}

/* Dropdown Styling */
.ui.dropdown .menu {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 212, 170, 0.2) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
}

.ui.dropdown .menu .item {
    color: #333333 !important;
    padding: 0.75rem 1rem !important;
}

.ui.dropdown .menu .item:hover {
    background: rgba(0, 212, 170, 0.1) !important;
}

.ui.dropdown .menu .item.selected {
    background: rgba(0, 212, 170, 0.2) !important;
    color: #00d4aa !important;
}

/* Status Badges */
.ui.label,
.status-badge,
.severity-badge {
    border-radius: 20px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
}

.ui.label.green,
.status-badge.online,
.status-badge.active {
    background: #00d4aa !important;
    color: #0a1a1f !important;
}

.ui.label.red,
.status-badge.offline,
.status-badge.inactive,
.severity-badge.critical {
    background: #dc3545 !important;
    color: #ffffff !important;
}

.ui.label.orange,
.severity-badge.major {
    background: #fd7e14 !important;
    color: #ffffff !important;
}

.ui.label.yellow,
.severity-badge.warning {
    background: #ffc107 !important;
    color: #0a1a1f !important;
}

.ui.label.blue,
.severity-badge.minor {
    background: #0d6efd !important;
    color: #ffffff !important;
}

/* Action Buttons in Tables */
.action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-buttons .ui.button {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    min-width: auto !important;
}

.action-buttons .ui.button.blue {
    background: linear-gradient(135deg, #0d6efd 0%, #0b5ed7 100%) !important;
    color: #ffffff !important;
}

.action-buttons .ui.button.grey {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.action-buttons .ui.button.red {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    color: #ffffff !important;
}

/* Loading States */
.ui.dimmer {
    background: rgba(10, 26, 31, 0.8) !important;
}

.ui.loader {
    color: #00d4aa !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .section-container,
    .inventory-container,
    .ui.container {
        padding: 1rem;
    }

    .section-header,
    .section-container h1,
    .inventory-container h1,
    .ui.container h1 {
        font-size: 1.5rem;
    }

    .ui.table thead th,
    .ui.table tbody td {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.875rem !important;
    }

    .action-buttons {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* Animation for better UX */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ui.segment,
.ui.table,
.filter-section {
    animation: fadeInUp 0.5s ease-out;
}

/* Override Semantic UI defaults */
.ui.container {
    background: transparent !important;
}

.ui.header {
    color: #00b894 !important;
}

.ui.divider {
    border-color: rgba(0, 212, 170, 0.2) !important;
}

/* Fix pagination visibility */
.pagination,
.ui.pagination,
.pagination-info,
.pagination-text,
.pagination-controls {
    color: #666666 !important;
    background: transparent !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    margin-top: 1rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

.pagination a,
.ui.pagination a {
    color: #00d4aa !important;
    text-decoration: none !important;
}

.pagination a:hover,
.ui.pagination a:hover {
    color: #00f5d4 !important;
}

/* Fix text visibility issues */
.text-muted,
.muted-text,
.secondary-text {
    color: #999999 !important;
    text-shadow: none !important;
}

/* Fix bottom glitch issues */
.page-footer,
.content-footer,
.section-footer {
    background: linear-gradient(135deg, #0a1a1f 0%, #0f2a35 100%) !important;
    border-top: 1px solid rgba(0, 212, 170, 0.2) !important;
    padding: 1rem 0 !important;
    margin-top: 2rem !important;
}

/* Fix specific section backgrounds - white */
.usage-section,
.network-overview,
.organization-section,
.data-collectors-section,
.keys-section {
    background: #FFFFFF !important;
    min-height: 100vh !important;
}

/* Fix inventory background glitch without adding extra elements - white */
.inventory-container {
    background: #FFFFFF !important;
    min-height: 100vh !important;
    color: #333333 !important;
}

.inventory-container h1 {
    color: #00d4aa !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    text-shadow: none !important;
    border-bottom: 2px solid rgba(0, 212, 170, 0.3) !important;
    padding-bottom: 0.5rem !important;
}

.inventory-container .filter-section {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 212, 170, 0.2) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
}

.inventory-container .filter-section h3 {
    color: #00d4aa !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    border-bottom: 1px solid rgba(0, 212, 170, 0.2) !important;
    padding-bottom: 0.5rem !important;
}

.inventory-container .inventory-table {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 212, 170, 0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: none !important;
    width: 100% !important;
    margin: 0 !important;
    table-layout: auto !important;
}

.inventory-container .inventory-table thead th {
    background: rgba(0, 212, 170, 0.1) !important;
    color: #00d4aa !important;
    border-bottom: 1px solid rgba(0, 212, 170, 0.2) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 1rem !important;
}

.inventory-container .inventory-table tbody td {
    background: transparent !important;
    color: #333333 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 1rem !important;
}

.inventory-container .inventory-table tbody tr:hover {
    background: rgba(0, 212, 170, 0.05) !important;
}

.inventory-container .action-button {
    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%) !important;
    color: #0a1a1f !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.75rem 1.5rem !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.3) !important;
    margin: 5px !important;
}

.inventory-container .action-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0, 212, 170, 0.4) !important;
}

.inventory-container .action-button:disabled {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #a0b3b8 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.inventory-container .filter-button {
    background: linear-gradient(135deg, #00d4aa 0%, #00b894 100%) !important;
    color: #0a1a1f !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    margin: 2px !important;
    cursor: pointer !important;
}

.inventory-container .clear-filter {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #00b894 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 600 !important;
    margin: 2px !important;
    cursor: pointer !important;
}

.inventory-container .pagination-controls {
    color: #666666 !important;
    background: transparent !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    margin-top: 1rem !important;
}

.inventory-container .pagination-controls a {
    color: #00d4aa !important;
    text-decoration: none !important;
    margin: 0 5px !important;
}

.inventory-container .pagination-controls a:hover {
    color: #00f5d4 !important;
}

/* Ensure no background glitches anywhere */
* {
    box-sizing: border-box !important;
}

/* Override any conflicting backgrounds */
.app-body-container-view,
.animated,
.fadeIn,
.animation-view,
.view-header,
.view-body {
    background: transparent !important;
}

/* Ensure consistent backgrounds for all containers */
.container,
.ui.container,
.section-container,
.inventory-container {
    background: transparent !important;
}

/* Dashboard card tokens (Flowbite-like) */
.dashboard-card {
    border-radius: var(--border-border-radius-rounded-base, 12px);
    border: var(--border-border-width-border, 1px) solid var(--colors-border-border-base, #E5E7EB);
    background: var(--colors-background-bg-primary-soft, #FFF);
    box-shadow: 0 1px 0.5px 0.05px rgba(29, 41, 61, 0.02);
}

.dashboard-card-title {
    color: var(--colors-text-text-heading, #101828);
    font-family: var(--typography-font-family-font-base, "Ubuntu Sans");
    font-size: var(--typography-font-size-text-lg, 18px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--typography-line-height-leading-7, 28px);
}

.dashboard-metric-value {
    color: var(--colors-text-text-heading, #101828);
    font-family: var(--typography-font-family-font-base, "Ubuntu Sans");
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
}

.dashboard-metric-label {
    color: var(--colors-text-text-body, #4A5565);
    font-family: var(--typography-font-family-font-base, "Ubuntu Sans");
    font-size: var(--typography-font-size-text-base, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--typography-line-height-leading-6, 24px);
}

/* Dashboard header (title + CTA) */
.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dashboard-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--colors-border-border-base, #E5E7EB);
    background: var(--colors/background/bg-primary-soft, #FFF);
    color: #1F8D79;
    font-weight: 600;
    font-size: 12px;
}

.dashboard-cta-button:hover {
    background: #F8FAFC;
}

/* Alerts list layout to match Figma spacing */
.alerts-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-6, 24px);
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #F1F5F9; /* subtle */
    background: #FFFFFF;
}

.alert-item:hover {
    background: #F9FAFB;
}

.alert-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    border: 1px solid var(--colors-border-border-base, #E5E7EB);
    background: #FFF;
    color: #64748B; /* default */
}

.severity-critical { color: var(--colors/text/text-fg-danger-strong, #B42318); background: var(--colors/background/bg-danger-soft, #FEE4E2); border-color: #FECACA; }
.severity-major    { color: var(--colors/text/text-heading, #101828); background: var(--colors/background/bg-warning-soft, #FFF4E5); border-color: #FED7AA; }
.severity-warning  { color: var(--colors/text/text-heading, #101828); background: var(--colors/background/bg-warning-soft, #FEF3C7); border-color: #FDE68A; }
.severity-minor    { color: var(--colors/background/bg-brand, #1D4ED8); background: var(--colors/background/bg-brand-softer, #EFF6FF); border-color: #BFDBFE; }
.severity-neutral  { color: #64748B; background: #F8FAFC; border-color: #E5E7EB; }

.alert-title {
    color: var(--colors-text-text-heading, #101828);
    font-weight: 600;
    font-size: 14px;
}

.alert-title:hover { color: #0EA5E9; }

.alert-subtitle {
    color: var(--colors-text-text-body, #4A5565);
    font-size: 12px;
    margin-top: 2px;
}

.alert-content { flex: 1; min-width: 0; }

/* Collector status headings */
.status-heading { display: flex; align-items: center; gap: 10px; }
.status-heading h5 {
    color: var(--colors-text-text-heading, #101828);
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
.status-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9999px;
    border: 1px solid var(--colors-border-border-base, #E5E7EB);
}
.status-connected { color: #16A34A; background: #F0FDF4; border-color: #BBF7D0; }
.status-disconnected { color: #DC2626; background: #FEF2F2; border-color: #FECACA; }
.status-other { color: #3B82F6; background: #EFF6FF; border-color: #BFDBFE; }

.collector-name { font-size: 14px; color: #475569; }

/* New status header row with icon pill + heading + divider */
.status-header-row { display: flex; align-items: center; gap: 12px; }
.status-heading-text { color: var(--colors-text-text-heading, #101828); font-weight: 600; font-size: 16px; line-height: var(--typography-line-height-leading-6, 24px); }
.status-pill { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--colors-border-border-base, #E5E7EB); }
.status-pill-success { background: var(--colors/background/bg-success-soft, #ECFDF5); color: var(--colors/text/text-fg-success-strong, #047857); }
.status-pill-danger { background: var(--colors/background/bg-danger-soft, #FEE2E2); color: var(--colors/text/text-fg-danger-strong, #B91C1C); }
.status-pill-brand { background: var(--colors/background/bg-brand-softer, #EFF6FF); color: var(--colors/background/bg-brand, #1D4ED8); }
.status-divider { height: 1px; background: var(--colors-border/border-base, #E5E7EB); margin: 12px 0; }