/* bedrock-server-manager/bedrock_server_manager/web/static/css/buttons.css */
/**
 * Button and Action Link Styles
 *
 * Defines various button styles inspired by Minecraft's Ore UI,
 * including default, primary (start), danger (stop/delete),
 * main menu, and navigation action styles. Includes hover/active states
 * and responsive adjustments.
 */

/* ==========================================================================
   Base Button/Link Style (Ore UI Inspired)
   ========================================================================== */

/* Apply base styles to all common button/link classes used for actions */
.action-button, /* Generic action button */
.start-button, /* Primary action (e.g., Start) */
.danger-button, /* Destructive action (e.g., Stop, Delete) */
.action-link, /* Links styled as buttons */
.main-menu-buttons button.main-button, /* Buttons specifically in main menu */
.main-menu-buttons a.main-button, /* Links styled as buttons in main menu */
.item-list .remove-button, /* Small remove buttons */
.nav-action-button /* Buttons in sidebar/navigation */ {
  /* --- Display & Box Model --- */
  display: inline-block; /* Allow margin/padding, flow inline */
  margin: 4px; /* Default spacing around buttons */
  border-width: 1px; /* Standard border width */
  border-style: solid; /* Solid border */
  border-radius: 0; /* Sharp corners */
  box-sizing: border-box; /* Include padding/border in element's total width/height */
  /* --- Appearance & Text --- */
  padding: 8px 16px; /* Default inner spacing (top/bottom, left/right) */
  cursor: pointer; /* Indicate interactivity */
  font-size: 1em; /* Use base font size */
  font-weight: 600; /* Semi-bold text */
  line-height: 1.4; /* Consistent line height */
  text-align: center; /* Center text within button */
  text-decoration: none; /* Remove underline from links styled as buttons */
  vertical-align: middle; /* Align nicely with adjacent inline elements */
  white-space: nowrap; /* Prevent text from wrapping onto multiple lines */
  user-select: none; /* Prevent text selection on buttons */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* --- Transitions --- */
  /* Smooth transitions for hover/active states */
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.1s ease;
  /* --- Reset Browser Defaults --- */
  text-shadow: none; /* Remove default text shadows */
  box-shadow: none; /* Remove default box shadows */
  appearance: none; /* Remove default OS styling for <button> elements */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* --- Default Color Theme (Dark Grey Button) --- */
  /* This is the fallback if no specific color class is applied */
  background-color: var(
    --button-background-color
  ); /* Medium-dark grey background */
  border-color: var(--button-border-color); /* Slightly lighter border */
  color: var(--button-text-color); /* Light text color */
}

/* ==========================================================================
   Hover & Active States
   ========================================================================== */

/* --- Default (Grey) --- */
.action-button:hover,
.action-link:hover {
  background-color: var(
    --button-hover-background-color
  ); /* Lighter grey on hover */
  border-color: var(--button-hover-border-color);
  color: var(--button-hover-text-color); /* Ensure text stays bright */
}

.action-button:active,
.action-link:active {
  background-color: var(
    --button-active-background-color
  ); /* Slightly darker grey when clicked */
  border-color: var(--button-active-border-color);
  /* Consider adding a subtle inset shadow for pressed effect if desired */
  /* box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); */
}

/* --- Primary (Green) --- */
/* Applied to .start-button and default .nav-action-button */
.start-button:hover,
.nav-action-button:hover:not(.danger-button) {
  /* Exclude danger variant */
  background-color: var(
    --primary-button-hover-background-color
  ); /* Brighter green on hover */
  border-color: var(--primary-button-hover-border-color);
  color: var(--primary-button-text-color);
}

.start-button:active,
.nav-action-button:active:not(.danger-button) {
  background-color: var(
    --primary-button-active-background-color
  ); /* Darker green when clicked */
  border-color: var(
    --primary-button-active-border-color
  ); /* Slightly lighter border than active bg */
  /* box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); */
}

/* --- Danger (Red) --- */
/* Applied to .danger-button, .remove-button, .nav-action-button.danger-button */
.danger-button:hover,
.item-list .remove-button:hover,
.nav-action-button.danger-button:hover {
  background-color: var(
    --danger-button-hover-background-color
  ); /* Brighter red on hover */
  border-color: var(--danger-button-hover-border-color);
  color: var(--danger-button-text-color);
}

.danger-button:active,
.item-list .remove-button:active,
.nav-action-button.danger-button:active {
  background-color: var(
    --danger-button-active-background-color
  ); /* Darker red when clicked */
  border-color: var(
    --danger-button-active-border-color
  ); /* Slightly lighter border than active bg */
  color: var(--danger-button-text-color);
  /* box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); */
}

/* --- Main Menu (Light Grey) --- */
.main-menu-buttons button.main-button:hover,
.main-menu-buttons a.main-button:hover {
  background-color: var(
    --button-hover-background-color
  ); /* Lighter grey on hover */
  border-color: var(--button-hover-border-color);
  color: var(--button-hover-text-color); /* Darker text for contrast */
}

.main-menu-buttons button.main-button:active,
.main-menu-buttons a.main-button:active {
  background-color: var(
    --button-active-background-color
  ); /* Darker grey when clicked */
  border-color: var(--button-active-border-color);
  /* box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); */
}

/* ==========================================================================
   Specific Button Color Styles (Resting State)
   ========================================================================== */

/* Primary / Start Button (Green) */
.start-button {
  background-color: var(--primary-button-background-color); /* Primary green */
  border-color: var(
    --primary-button-border-color
  ); /* Slightly lighter green border */
  color: var(--primary-button-text-color);
}

/* Danger / Stop / Delete Button (Red) */
.danger-button,
.item-list .remove-button {
  /* Style remove button as danger */
  background-color: var(--danger-button-background-color); /* Primary red */
  border-color: var(
    --danger-button-border-color
  ); /* Slightly lighter red border */
  color: var(--danger-button-text-color);
}

/* Main Menu Buttons (Distinct Light Grey Style) */
.main-menu-buttons button.main-button,
.main-menu-buttons a.main-button {
  background-color: var(
    --button-background-color
  ); /* Lighter grey background */
  border-color: var(--button-border-color); /* Even lighter border */
  color: var(--button-text-color); /* Dark text */
  font-weight: 600; /* Ensure consistent weight */
}

/* Navigation Action Button (Sidebar/Header) */
.nav-action-button {
  /* Specific layout adjustments */
  margin: 15px 15px 5px 15px; /* Custom margins */
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: center;
  font-weight: bold;
  /* Default color is Green (Primary) */
  background-color: var(--primary-button-background-color);
  border: 1px solid var(--primary-button-border-color);
  border-left: 3px solid var(--primary-button-background-color); /* Distinctive left border */
  color: var(--primary-button-text-color);
  display: block; /* Make it block level for full width */
  width: auto; /* Reset width if block */
}
/* Danger variant for Navigation Action Button */
.nav-action-button.danger-button {
  background-color: var(--danger-button-background-color); /* Red */
  border-color: var(--danger-button-border-color);
  border-left-color: var(
    --danger-button-background-color
  ); /* Match background */
  color: var(--danger-button-text-color);
}

.nav-action-button.install-server-button {
  color: var(--primary-button-text-color);
}

/* ==========================================================================
   Contextual / Size Overrides
   ========================================================================== */

/* Smaller buttons used within lists (e.g., remove item) */
.item-list .remove-button {
  padding: 3px 8px; /* Reduced padding */
  margin: 0 0 0 5px; /* Specific margin (only left) */
  font-size: 0.85em; /* Smaller font */
  line-height: 1.2; /* Adjust line height for smaller size */
  vertical-align: baseline; /* Align better with text */
}

/* Smaller buttons within server status cards */
.server-card-actions .action-link,
.server-card-actions .action-button,
.server-card-actions .start-button,
.server-card-actions .danger-button {
  margin: 1px; /* Tighter margin */
  padding: 3px 6px; /* Smaller padding */
  font-size: 0.8em; /* Smaller font */
  line-height: 1.2;
}

/* Buttons within generic action sections (e.g., below forms) */
.section-actions .action-link,
.section-actions .action-button,
.section-actions .start-button,
.section-actions .danger-button {
  /* Use default padding/size unless specific override needed */
  margin: 4px; /* Default margin */
  /* Example override: Maybe larger bottom margin */
  /* margin-bottom: 10px; */
}

/* ==========================================================================
   Layout Helpers for Button Groups
   ========================================================================== */

/* Container for inline action buttons often found in table rows */
.actions {
  margin: -2px; /* Negative margin to counteract individual button margins for tighter grouping */
  display: inline-block; /* Don't take full width */
  line-height: 1; /* Prevent container from becoming too tall */
}

.actions > * {
  /* Direct children (buttons/links) */
  margin: 2px; /* Restore standard margin for spacing between elements */
  vertical-align: middle; /* Align nicely on the same line */
}

/* General container for grouping related buttons */
.button-group {
  margin-bottom: 15px; /* Space below the group */
  /* Optional Flex layout for alignment control */
  /* display: flex; */
  /* flex-wrap: wrap; */ /* Allow wrapping on small screens */
  /* gap: 8px; */ /* Spacing between buttons in flex */
}
/* Ensure buttons inside group have standard margin */
.button-group .action-link,
.button-group .action-button,
.button-group .main-button {
  margin: 4px;
}

/* Link often used for navigating back */
.navigation-link {
  display: block; /* Make it block for centering */
  margin-top: 25px; /* Space above */
  text-align: center;
}

/* Container specifically for main menu buttons */
.main-menu-buttons {
  text-align: center;
  padding: 10px 0; /* Add some vertical padding */
}

/* ==========================================================================
   Responsive Adjustments (Mobile)
   ========================================================================== */

@media (max-width: 768px) {
  /* Tablets and smaller */
  /* Slightly smaller buttons overall */
  .action-button,
  .start-button,
  .danger-button,
  .action-link,
  .main-menu-buttons button.main-button,
  .main-menu-buttons a.main-button,
  .nav-action-button {
    padding: 6px 12px;
    margin: 3px;
    font-size: 0.95em;
  }

  /* Adjust specific context overrides */
  .item-list .remove-button {
    padding: 2px 6px;
    font-size: 0.8em;
  }

  .server-card-actions .action-link,
  .server-card-actions .action-button,
  .server-card-actions .start-button,
  .server-card-actions .danger-button {
    padding: 3px 6px; /* Keep padding same as other small buttons */
    font-size: 0.8em; /* Keep size same as other small buttons */
  }

  /* Center align button groups and actions containers */
  .button-group {
    text-align: center;
  }

  .actions {
    display: block;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* Mobile phones */
  /* Further reduce padding/size */
  .action-button,
  .start-button,
  .danger-button,
  .action-link,
  .main-menu-buttons button.main-button,
  .main-menu-buttons a.main-button,
  .nav-action-button {
    padding: 6px 10px; /* Increase padding slightly for touch targets */
    font-size: 0.9em;
  }

  /* Adjust overrides */
  .item-list .remove-button {
    padding: 3px 6px; /* Slightly larger touch target */
    font-size: 0.8em;
  }

  .server-card-actions .action-link,
  .server-card-actions .action-button,
  .server-card-actions .start-button,
  .server-card-actions .danger-button {
    padding: 3px 7px;
    font-size: 0.75em;
  }

  /* Stack main menu buttons for better mobile layout */
  .main-menu-buttons button.main-button,
  .main-menu-buttons a.main-button {
    display: block; /* Make them full width */
    width: 90%; /* Control width */
    max-width: 300px; /* Max width */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px; /* Increase vertical spacing */
    margin-bottom: 10px;
  }
}
