/* ===================================================
   CENTRALIZED NUMBER INPUT STYLING
   ===================================================
   
   This file provides consistent styling for number input fields
   with increment/decrement buttons across the application.
*/

/* Import centralized systems */
@import url("spacing.fcb7e2c7ab0a.css");
@import url("borders.d5d3bb34e628.css");
@import url("colour_scheme.58fe2f46e64e.css");

/* ===================================================
   MODERN NUMBER INPUT STYLING
   =================================================== */

/* Number input group container */
.number-input-group {
  display: flex;
  flex-wrap: nowrap;
}

/* Number input field */
.number-input-group input[type="text"],
.number-input-group input[type="number"] {
  width: 110px;
  text-align: center;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Button container */
.number-input-group .number-input-buttons {
  display: flex;
}

/* Button styling */
.number-input-group .number-input-buttons button {
  border-radius: 0;
  padding: var(--space-1) var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-light);
  border: var(--border-width, 1px) solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 0.2s;
}

/* Button hover state */
.number-input-group .number-input-buttons button:hover {
  background-color: var(--color-light-hover);
}

/* Button active state */
.number-input-group .number-input-buttons button:active {
  background-color: var(--color-secondary);
  color: var(--color-text-white);
}

/* Last button in group gets rounded corners on right side */
.number-input-group .number-input-buttons button:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* ===================================================
   DIAGRAM-SPECIFIC STYLING
   =================================================== */

/* Card spacing in diagram edit panel */
.diagram-edit-panel .card {
  margin-bottom: var(--space-3);
}

/* Form label in diagram edit panel */
.diagram-edit-panel .form-label {
  margin-bottom: var(--space-1);
}