/* 
 * Homni Custom Styles 
 * This file contains style overrides for the application
 */

/* Masonry grid container - TRUE MASONRY LAYOUT */
.masonry-grid {
  width: 100% !important;
  max-width: 1600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  column-count: 3 !important; /* Reduced from 4 to 3 columns for better distribution */
  column-gap: 20px !important; /* Increased gap between columns for better separation */
  padding: 0 !important; /* Container already provides horizontal padding */
  box-sizing: border-box !important;
}

/* Servers grid container - control spacing precisely */
.servers-grid {
  margin-top: 0 !important; /* No top margin */
  margin-bottom: 0 !important; /* No bottom margin */
  padding-top: 0 !important; /* No top padding */
  padding-bottom: 0 !important; /* No bottom padding */
}

/* ======== SERVER CARD STYLES ======== */
/* Force server cards to use true masonry layout */
.server-card {
  display: inline-block !important; /* Critical for masonry layout */
  width: 100% !important; /* Take full width of column */
  box-sizing: border-box !important;
  break-inside: avoid !important; /* Prevent cards from breaking across columns */
  padding: 1.25rem !important;
  margin-bottom: 1rem !important; /* Standardized 1rem spacing between cards */
  background-color: var(--server-background) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  border: none !important;
  transition: none !important; /* Remove transition effects */
  min-width: 280px !important; /* Minimum width to ensure readability */
  max-width: 100% !important; /* Let the card take the full column width */
}

/* Remove hover effects on all cards */
.server-card:hover,
.card:hover {
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: none !important;
}

/* Server header styling */
.server-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.75rem !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  width: 100% !important; /* Ensure it takes full width */
}

.server-header h2 {
  margin: 0 !important;
  color: var(--service-text) !important;
  font-size: var(--font-size-md) !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  flex: 1 !important; /* Allow header to take available space */
  min-width: 0 !important; /* Important for text-overflow to work */
}

/* Service styling */
.services-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important; /* Slightly increased gap */
  width: 100% !important;
  margin-top: 0.75rem !important;
  padding-left: 0 !important; /* Remove any potential padding */
}

/* Service items styling - align with IP address */
.service-item {
  padding: 0.75rem !important;
  padding-left: 36px !important; /* Match the hostname and notes padding */
  margin-left: 0 !important; /* Ensure no additional margin shifts alignment */
  border-radius: 4px !important;
  background-color: var(--service-background) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: all 0.2s !important;
  height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  position: relative !important; /* For proper positioning relative to config icon */
  width: 100% !important; /* Ensure full width */
  min-width: 0 !important; /* Allow text-overflow to work */
}

/* Service wrapper positioning */
.service-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important; /* Allow children to shrink below content size */
}

.service-link {
  flex-grow: 1 !important;
  min-width: 0 !important; /* Allow text-overflow to work */
  width: 100% !important;
}

/* Service name and port text */
.service-name, .service-port {
  position: relative !important;
  z-index: 1 !important; /* Above the background */
}

.service-name {
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important; /* Allow text to be truncated */
  max-width: calc(100% - 60px) !important; /* Leave room for port */
}

.service-port {
  color: var(--secondary-text) !important;
  font-size: var(--font-size-sm) !important;
  white-space: nowrap !important;
  margin-left: 8px !important;
}

/* ======== BUTTON STYLING ======== */

/* Primary Button (Add Server) */
.add-button,
.btn-primary {
  background-color: var(--primary-button) !important;
  color: var(--primary-button-text) !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  font-size: var(--font-size-sm) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  height: var(--height-button) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  text-decoration: none !important;
  min-width: 90px !important;
}

.add-button:hover,
.btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary-button) 90%, white) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Secondary Button (Import, Export, Sort buttons) */
.header-button, 
.import-button, 
.export-button,
.sort-button,
.btn-secondary,
.btn-cancel {
  background-color: var(--secondary-button) !important;
  color: var(--secondary-button-text) !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  font-size: var(--font-size-sm) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  height: var(--height-button) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  text-decoration: none !important;
  min-width: 90px !important;
}

.header-button:hover, 
.import-button:hover, 
.export-button:hover,
.sort-button:hover,
.btn-secondary:hover,
.btn-cancel:hover {
  background-color: color-mix(in srgb, var(--secondary-button) 90%, white) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Active state for secondary buttons */
.sort-button.active {
  background-color: var(--primary-button) !important;
  color: var(--primary-button-text) !important;
}

.sort-button.active:hover {
  background-color: color-mix(in srgb, var(--primary-button) 90%, white) !important;
}

/* Tertiary Button (Add Service, small actions within cards) */
.small-button,
.server-actions .small-button {
  background-color: var(--server-background) !important; /* Transparent background */
  color: var(--accent-text) !important; /* Accent text color */
  border: 1px solid var(--accent-text) !important; /* Accent text border */
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  font-size: var(--font-size-sm) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  height: var(--height-button) !important; /* Match button height standard */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  min-width: 90px !important;
  box-shadow: none !important;
}

.small-button:hover,
.server-actions .small-button:hover {
  background-color: var(--primary-button) !important; /* Primary button background on hover */
  color: var(--primary-button-text) !important; /* Primary button text color */
  border-color: var(--primary-button) !important; /* Match the background color */
  transform: none !important;
}

/* Delete button specific styling */
.small-button.delete,
.btn-delete {
  background-color: transparent !important;
  border: 1px solid var(--status-red) !important;
  color: var(--status-red) !important;
}

.small-button.delete:hover,
.btn-delete:hover {
  background-color: var(--status-red) !important;
  color: var(--primary-button-text) !important;
  border-color: var(--status-red) !important;
}

/* Sorting controls */
.sorting-options {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  gap: 0.5rem !important;
  color: var(--secondary-text) !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Search input specific styling override */
.search-input {
  border: none !important;
  padding: 8px 35px 8px 15px !important;
}

.search-input:focus {
  border: 1px solid var(--accent-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

.sort-buttons {
  display: flex !important;
  gap: 0.5rem !important;
}

/* Section header layout with standardized spacing */
.section-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 2rem !important; /* 2rem from header to buttons */
  margin-bottom: 2rem !important; /* 2rem from buttons to server cards */
  flex-wrap: wrap !important;
  gap: 1rem !important; /* Standardized 1rem spacing */
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.section-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

/* ======== DIALOG STYLES ======== */
/* Dialog overlay and positioning */
.dialog {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  z-index: 100 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.dialog-content {
  background-color: var(--server-background) !important;
  padding: 2rem !important;
  border-radius: 8px !important;
  width: 100% !important;
  max-width: 500px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
  z-index: 101 !important;
  position: relative !important;
}

.dialog-title {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  color: var(--service-text) !important;
  font-size: var(--font-size-lg) !important;
  font-weight: 500 !important;
}

.dialog-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
}

.btn {
  height: 38px !important;
  padding: 0 1rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary-button) 90%, white) !important;
  transform: none !important;
}

.btn-cancel:hover {
  background-color: color-mix(in srgb, var(--secondary-button) 90%, white) !important;
  transform: none !important;
}

/* Position auto-margin for delete buttons */
.btn-delete {
  margin-right: auto !important;
}

/* Form elements */
.form-group {
  margin-bottom: 1rem !important;
  position: relative !important;
}

.form-group label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  color: var(--server-text) !important;
  font-size: 0.9rem !important;
}

input, textarea {
  width: 100% !important;
  padding: 0.5rem !important;
  border: 1px solid var(--input-border, #444) !important;
  background-color: var(--service-background) !important;
  color: var(--server-text) !important;
  border-radius: 4px !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
}

input:focus, textarea:focus {
  outline: none !important;
  border-color: var(--accent-button, var(--service-text)) !important;
  box-shadow: none !important;
}

/* Restore server card content styling */
.server-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 0.75rem !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.server-header h2 {
  margin: 0 !important;
  color: var(--service-text) !important;
  font-size: var(--font-size-md) !important;
  font-weight: 500 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Small button adjustments */
.small-button {
  background-color: transparent !important;
  color: var(--service-text) !important;
  border: 1px solid var(--service-text) !important;
  padding: 0.25rem 0.5rem !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  height: 38px !important; /* Match header buttons height */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 90px !important; /* Ensure minimum width */
}

.small-button:hover {
  background-color: var(--primary-button) !important;
  color: var(--primary-button-text) !important;
  border-color: var(--primary-button) !important;
  transform: none !important;
}

.small-button.delete {
  border-color: var(--status-red) !important;
  color: var(--status-red) !important;
}

.small-button.delete:hover {
  background-color: var(--status-red) !important;
  color: var(--primary-button-text) !important;
  border-color: var(--status-red) !important;
  transform: none !important;
}

/* Improve server notes display */
.server-notes {
  color: var(--secondary-text) !important;
  font-size: var(--font-size-sm) !important;
  font-style: italic !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  white-space: pre-wrap !important;
  line-height: var(--line-height-compact) !important;
  padding-left: 36px !important; /* Match the hostname padding */
}

.server-actions {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

/* Config icon styling */
.config-icon {
  width: 16px !important;
  height: 16px !important;
  position: absolute !important;
  left: 10px !important; /* Consistent left position for all config icons */
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background-color: var(--secondary-text) !important;
  -webkit-mask-image: url('/images/config.png') !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url('/images/config.png') !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  z-index: 2 !important; /* Ensure icon is above other elements */
}

.config-icon:hover {
  background-color: var(--accent-text) !important;
}

/* Debug borders - uncomment to see layout structure */
/* 
.server-card:nth-child(3n+1) { border: 3px solid red !important; }
.server-card:nth-child(3n+2) { border: 3px solid green !important; }
.server-card:nth-child(3n+3) { border: 3px solid blue !important; }
*/

/* ======== END MASONRY LAYOUT STYLES ======== */

/* Responsive styling for the flex layout */
@media (min-width: 1200px) {
  .server-card {
    flex: 1 1 350px !important;
    max-width: 450px !important;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .server-card {
    flex: 1 1 350px !important; 
    max-width: 450px !important;
  }
}

@media (max-width: 900px) {
  .server-card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
  
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: 2rem !important; /* Preserve top margin on mobile */
    margin-bottom: 2rem !important; /* Preserve bottom margin on mobile */
  }
  
  .sorting-options {
    margin-top: 1rem !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 1rem 2rem !important; /* Maintain 2rem horizontal padding even on small screens */
  }
  
  .section-header {
    padding-top: 1rem;
    margin-top: 2rem !important; /* Keep top spacing */
    margin-bottom: 2rem !important; /* Keep bottom spacing */
  }
}

/* Checkbox styles */
.checkbox-group {
  margin-top: 0.5rem !important;
  display: block !important; /* Change to block */
}

.checkbox-label {
  display: block !important;
  position: relative !important;
  padding-left: 30px !important; /* Changed to 30px for balanced spacing */
  cursor: pointer !important;
  min-height: 20px !important;
  line-height: 20px !important;
}

.checkbox-label input[type="checkbox"] {
  position: absolute !important; /* Position absolutely */
  left: 0 !important; /* Align to left */
  top: 0 !important; /* Align to top */
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  border: 1px solid var(--accent-text) !important;
  background-color: var(--server-background) !important;
  transition: all 0.2s !important;
}

/* Rest of the checkbox styles remain the same */
.checkbox-label input[type="checkbox"]:checked {
  background-color: var(--primary-button) !important;
  border-color: var(--primary-button) !important;
}

.checkbox-label input[type="checkbox"]:hover {
  background-color: var(--primary-button) !important;
  border-color: var(--primary-button) !important;
  color: var(--primary-button-text) !important;
}

.checkbox-label input[type="checkbox"]:checked::after {
  content: '✓' !important;
  color: var(--primary-button-text) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  position: absolute !important;
  left: 3px !important;
  top: 1px !important;
}

.checkbox-label span {
  font-size: var(--font-size-sm) !important;
  color: var(--server-text) !important;
}

/* ======== COLOR PALETTE DIALOG SPECIFIC STYLES ======== */
/* Theme buttons */
.theme-selector {
  display: flex !important;
  gap: 1.5rem !important;
  margin-bottom: 1rem !important;
  margin-top: 1rem !important;
  justify-content: center !important;
}

.theme-button {
  background: transparent !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 0.25rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 130px !important;
}

.theme-preview {
  width: 100% !important;
  height: 80px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin-bottom: 0.5rem !important;
  box-shadow: none !important;
  position: relative !important;
}

.theme-button span {
  color: var(--server-text) !important;
  font-size: var(--font-size-sm) !important;
}

/* Color picker layouts */
.color-categories.simplified {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important; /* Reduced gap between categories */
  margin-top: 0.5rem !important; /* Reduced top margin */
  width: 100% !important;
  padding: 0.25rem 0 !important; /* Reduced padding */
}

.color-picker-container {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 0.25rem !important; /* Reduced bottom margin */
  width: 100% !important;
}

.color-picker-label {
  flex: 1 !important;
  font-size: var(--font-size-sm) !important;
  min-width: 140px !important;
}

.color-picker-input {
  width: 100px !important;
  padding: 0.25rem !important;
  text-align: center !important;
  font-family: monospace !important;
  border-radius: 3px !important;
  border: none !important;
  background-color: var(--service-background) !important;
}

/* Remove horizontal spacer completely */
.color-picker-spacer {
  display: none !important;
}

/* Color picker inputs */
input[type="color"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 36px !important;
  height: 30px !important;
  padding: 0 !important;
  border: 1px solid var(--secondary-text) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  background-color: transparent !important;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

input[type="color"]::-webkit-color-swatch {
  border: none !important;
  border-radius: 3px !important;
}

/* Palette actions */
.palette-actions {
  margin-top: 1rem !important; /* Reduced top margin */
  display: flex !important;
  justify-content: space-between !important;
}

.palette-action-buttons {
  display: flex !important;
  gap: 1rem !important;
}

.btn-reset {
  background-color: transparent !important;
  border: 1px solid var(--primary-button) !important;
  color: var(--primary-button) !important;
  height: 38px !important;
  padding: 0 1rem !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 0.9rem !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.btn-reset:hover {
  background-color: var(--primary-button) !important;
  color: white !important;
  transform: none !important;
}

/* Container spacing - Add direct control of spacing */
.container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 0 auto !important;
  gap: 0 !important; /* Remove gap between container children */
}

/* Fix direct children of container to not have their own margins by default, 
   but allow specific overrides for section-header and footer */
.container > * {
  margin-top: 0 !important; 
  margin-bottom: 0 !important;
}

/* Exception for section-header to maintain proper spacing */
.container > .section-header {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Exception for footer */
.container > .footer {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
}

/* Responsive Styles - Updated for Masonry */
@media (max-width: 1100px) and (min-width: 800px) {
  /* Commented out old column-count styling
  .servers-grid {
    column-count: 2;
  }
  */
}

@media (max-width: 799px) {
  /* Commented out old column-based styling
  .servers-grid {
    column-count: 1;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  */
  
  .container {
    padding: 1rem 2rem !important; /* Maintain 2rem horizontal padding */
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 1rem 2rem !important; /* Maintain 2rem horizontal padding even on small screens */
  }
  
  .section-header {
    padding-top: 1rem;
  }
}

/* No services message */
.no-services {
  padding: 1rem 0 !important;
  text-align: center !important;
  color: var(--secondary-text) !important;
  font-style: italic !important;
  background-color: rgba(51, 51, 51, 0.3) !important;
  border-radius: 4px !important;
  margin: 0.5rem 0 1.25rem !important;
}

/* Bottom spacing */
body {
  padding-bottom: 0 !important; /* Remove padding as it's handled by footer padding */
}

/* Make the app use full page width but center content */
#root {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

body, html {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* Ensure header spans full width with standardized spacing */
.header {
  width: 100%;
  padding-top: 1rem !important; /* Keep top padding */
  padding-bottom: 1rem !important; /* Ensure exactly 1rem below search bar */
  padding-left: 2rem !important; /* Keep horizontal padding */
  padding-right: 2rem !important; /* Keep horizontal padding */
  box-sizing: border-box;
  gap: 1rem !important; /* Standardized 1rem spacing between header elements */
}

.search-container {
  flex-grow: 1;
  max-width: 1200px;
  margin: 0 1rem !important; /* Standardized 1rem spacing */
}

/* Updated status colors matching the specified hex codes */
:root {
  --status-red: #ED6B5E !important;    /* Red */
  --status-amber: #F5BF4F !important;  /* Amber */
  --status-green: #61C554 !important;  /* Green */
}

/* Remove hover animations */
.card, 
.server-card,
.add-button {
  transition: none !important;
}

.card:hover, 
.server-card:hover,
.add-button:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Service wrapper fixes to ensure proper alignment */
.service-wrapper {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 40px !important;  /* Increase height to match buttons */
  min-height: 40px !important;  /* Ensure consistent height */
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Ensure service status icons are properly aligned */
.service-status {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 8px !important;
}

/* Adjust palette icon size */
.header-palette-icon {
  width: 20px !important;
  height: 20px !important;
}

/* Reduce spacing between buttons row and server cards by 20% */
.section-header {
  margin-bottom: 2rem !important; /* Keep 2rem below buttons */
  margin-top: 2rem !important; /* Maintain 2rem above buttons */
}

/* Triple the spacing between dialog titles and first line of text */
.dialog-content h2.dialog-title {
  margin-bottom: 1rem !important;
}

/* Triple the spacing between theme selection text and theme buttons */
.dialog-content p {
  margin-bottom: 1rem !important;
}

/* Footer spacing adjustment for standardized 1rem spacing */
.footer {
  padding-top: 0 !important;
  padding-bottom: 1rem !important; /* Keep 1rem to bottom of page */
  margin-top: 1rem !important; /* Reduced from 2rem to 1rem for correct total spacing */
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

/* Remove hover effects on the welcome card */
.welcome-section .card {
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  border: none !important;
}

.welcome-section .card:hover {
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
  border: none !important;
  background-color: var(--server-background) !important;
}

/* Welcome Section Styling */
.welcome-section .card h2 {
  margin-bottom: 1.5rem !important;
  font-size: var(--font-size-xl) !important;
  font-weight: 500 !important;
  color: var(--service-text) !important;
  line-height: var(--line-height-normal) !important;
}

.welcome-section .card p {
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-normal) !important;
  margin-bottom: 1rem !important;
}

.welcome-section .card p strong {
  color: var(--service-text) !important;
}

.privacy-note {
  background-color: transparent !important;
  border-left: 3px solid var(--service-text) !important;
  padding: 1rem !important;
  margin-bottom: 2rem !important;
  border-radius: 0 4px 4px 0 !important;
}

.privacy-note p {
  margin-bottom: 0.5rem !important;
  font-size: var(--font-size-sm) !important;
  line-height: var(--line-height-compact) !important;
}

.privacy-note p:last-child {
  margin-bottom: 0 !important;
}

.privacy-note p em {
  font-style: normal !important;
  color: var(--service-text) !important;
  font-weight: 500 !important;
}

.welcome-buttons {
  margin-top: 2rem !important;
}

/* Keyboard Shortcuts Styling */
.keyboard-shortcuts-info {
  margin-top: 2rem !important;
}

.keyboard-shortcuts-info h3 {
  margin-bottom: 1rem !important;
  font-size: var(--font-size-base) !important;
  color: var(--accent-text) !important;
}

.keyboard-shortcuts-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 1rem !important;
}

.shortcut-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  background-color: var(--service-background) !important;
  border-radius: 6px !important;
  padding: 0.75rem 0.5rem !important; /* Adjusted padding */
  box-shadow: none !important;
  border: none !important;
  height: auto !important;
  min-height: 55px !important; /* Further reduced minimum height */
  max-width: 100% !important;
}

.shortcut-item:hover {
  box-shadow: none !important;
  border: none !important;
  transform: none !important;
  filter: none !important;
  background-color: var(--service-background) !important;
}

.shortcut-keys {
  margin-bottom: 0.25rem !important;
  margin-top: 0 !important;
}

kbd {
  background-color: var(--header-background) !important;
  color: var(--service-text) !important; /* Changed to match palette text color */
  border: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  font-family: monospace !important;
  padding: 0.15rem 0.3rem !important; 
  margin: 0 0.1rem !important;
  font-size: var(--font-size-sm) !important;
}

.shortcut-description {
  color: var(--secondary-text) !important;
  font-size: var(--font-size-sm) !important;
  margin: 0 !important;
  line-height: var(--line-height-compact) !important;
  font-style: italic !important;
  font-weight: normal !important;
}

/* ======== NOTIFICATIONS ======== */
/* Target the specific save-notification class used in the app */
.save-notification {
  position: fixed !important;
  bottom: 20px !important; /* Position at the bottom */
  right: 20px !important; /* Position at the right */
  background-color: var(--server-background) !important; /* Tertiary button style - transparent background */
  color: var(--accent-text) !important; /* Tertiary button style - accent text color */
  padding: 0 16px !important; /* Horizontal padding only */
  border-radius: 4px !important; /* Match button border-radius */
  box-shadow: none !important; /* No shadow, like tertiary buttons */
  z-index: 1000 !important;
  max-width: 350px !important;
  animation: slide-in-notification 0.3s ease-out !important;
  border: 1px solid var(--accent-text) !important; /* Tertiary button style - accent text border */
  top: auto !important; /* Override any top positioning */
  left: auto !important; /* Override any left positioning */
  margin: 0 !important; /* Reset margins */
  transform: none !important; /* Reset transforms */
  height: var(--height-button) !important; /* Match button height */
  line-height: var(--height-button) !important; /* Center text vertically */
  display: flex !important;
  align-items: center !important;
  min-width: 200px !important; /* Ensure reasonable minimum width */
}

/* Error notification variant */
.save-notification.error {
  background-color: var(--server-background) !important;
  color: var(--status-red) !important;
  border-color: var(--status-red) !important;
}

/* Success notification variant */
.save-notification.success {
  background-color: var(--server-background) !important;
  color: var(--status-green) !important;
  border-color: var(--status-green) !important;
}

/* Animation for sliding in from right */
@keyframes slide-in-notification {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Ensure notification text is properly visible */
.save-notification span {
  color: inherit !important; /* Inherit color from parent notification */
  font-size: var(--font-size-sm) !important;
  font-weight: normal !important;
  line-height: var(--line-height-normal) !important;
}

/* Server hostname and config icon alignment */
.server-hostname-container {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  position: relative !important; /* For absolute positioning */
  width: 100% !important;
  min-width: 0 !important; /* Allow text to truncate */
}

.server-hostname {
  color: var(--secondary-text) !important;
  margin: 0 !important;
  font-size: var(--font-size-sm) !important;
  padding-left: 36px !important; /* Match the service items padding */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  min-width: 0 !important;
  line-height: var(--line-height-compact) !important;
}

.config-icon {
  width: 16px !important;
  height: 16px !important;
  position: absolute !important;
  left: 10px !important; /* Consistent left position for all config icons */
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background-color: var(--secondary-text) !important;
  -webkit-mask-image: url('/images/config.png') !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-image: url('/images/config.png') !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  z-index: 2 !important; /* Ensure icon is above other elements */
}

.config-icon:hover {
  background-color: var(--accent-text) !important;
}

/* Service item hover effect */
.service-item:hover {
  background-color: var(--hover-service-item) !important;
}

/* ======== RESPONSIVE LAYOUT ======== */
/* Responsive column-count adjustments */
@media (max-width: 1400px) {
  .masonry-grid {
    column-count: 2 !important; /* Reduced from 3 to 2 columns on medium-large screens */
    max-width: 1200px !important; /* Adjusted max-width for better column sizing */
  }
  
  .server-card {
    min-width: 260px !important; /* Slightly smaller minimum for medium screens */
  }
}

@media (max-width: 900px) {
  .masonry-grid {
    column-count: 1 !important; /* 1 column on small screens */
    max-width: 600px !important; /* Constrained width for better readability */
  }
  
  .server-card {
    min-width: 240px !important; /* Even smaller minimum for small screens */
  }
  
  .section-header {
    padding-top: 1rem !important;
  }
}

/* Add Service button styling */
.small-button.add-service, 
button.add-service,
a.add-service {
  background-color: var(--accent-button) !important;
  color: var(--primary-button-text) !important;
  border: none !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  font-size: 0.9rem !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  height: 38px !important; /* Match header buttons height */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
}

.small-button.add-service:hover,
button.add-service:hover,
a.add-service:hover {
  background-color: var(--accent-button-hover, var(--accent-button)) !important;
  opacity: 0.9 !important;
  transform: none !important;
}

/* Add Service button specific styling */
.server-actions .small-button {
  background-color: transparent !important;
  color: var(--accent-text) !important;
  border: 1px solid var(--accent-text) !important;
  height: 38px !important;
}

.server-actions .small-button:hover {
  background-color: var(--primary-button) !important; /* Primary button background on hover */
  color: var(--primary-button-text) !important; /* Primary button text color */
  border-color: var(--primary-button) !important; /* Match the background color */
  transform: none !important;
}

/* Adjust text sizing */
/* Replaced with global transform:scale on body element */

/* Adjust dialog and form elements */
/* Replaced with global transform:scale on body element */

/* Adjust spacing */
/* Replaced with global transform:scale on body element */

/* Make the app use full page width but center content */
.homni-app {
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--page-background) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important; /* Remove any gap between flex items */
}

/* Specific spacer for maintaining exactly 1rem between header and buttons */
.section-header-spacer {
  display: none !important;
}

/* Server card bottom spacing - Control spacing to footer */
.server-card:last-child {
  margin-bottom: 0 !important; /* Remove bottom margin from last card */
}

/* Make sure welcome section has proper spacing as well */
.welcome-section {
  padding-top: 2rem !important;
  margin-bottom: 2rem !important; /* Match button bar spacing */
}

/* Fix any container>direct-child margins that might be causing excess space */
.container > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Make sure container spacing doesn't override the section header margins */
.container > .section-header {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Service port container */
.service-port-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
}

/* Search notification styling */
.search-status {
  margin-top: 1rem !important;
  margin-bottom: 0 !important; /* Removed bottom margin */
  padding: 0.75rem 1rem !important;
  background-color: var(--server-background) !important;
  color: var(--accent-text) !important;
  border: 1px solid var(--accent-text) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-shadow: none !important;
}

/* Make the app use full page width but center content */
.homni-app {
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--page-background) !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important; /* Remove any gap between flex items */
}