/* 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 - Figma bg-secondary-soft */
#content {
  background: var(--themes-colors-background-bg-secondary-soft) !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:not(.table-header-cell) {
  background: #f9fafb !important;
  color: #6b7280 !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-weight: 400 !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: 4px !important;
  font-weight: 500 !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:not(.table-header-cell) {
  background: #f9fafb !important;
  color: #6b7280 !important;
  border-bottom: 1px solid #e5e7eb !important;
  font-weight: 400 !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;
}