/* Global Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #6da252; /* Green background similar to screenshot */
    margin: 0;
    padding: 20px;
    color: #000;
}

.main-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #6da252;
}

/* Header */
.form-header {
    background: linear-gradient(to bottom, #000, #333);
    padding: 10px;
    text-align: center;
    border: 2px solid #444;
    margin-bottom: 20px;
}

.form-header h1 {
    color: #ff9800; /* Orange/Gold text */
    margin: 0;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 2px #000;
}

/* Top Section Layout */
.top-section {
    display: flex;
    gap: 20px;
    background-color: #333; /* Dark grey container for form */
    padding: 20px;
    border: 1px solid #000;
    align-items: flex-start;
}

.form-area {
    flex: 2;
}

.form-grid {
    display: flex;
    gap: 40px;
}

.form-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Input Styles */
.input-group {
    display: flex;
    align-items: center;
}

.input-group label {
    width: 140px;
    color: #ff9800; /* Orange labels */
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    background-color: #444; /* Dark background for label look */
    padding: 5px;
    border: 1px solid #000;
    margin-right: 10px;
}

input[type="text"] {
    flex: 1;
    padding: 5px;
    border: 1px solid #000;
    font-weight: bold;
    text-align: center;
    outline: none;
}

.input-yellow {
    background-color: #ffc107; /* Yellow inputs */
    color: #000;
}

.input-blue {
    background-color: #9abed8; /* Blue/Grey read-only inputs */
    color: #000;
}

.wide-group {
    margin-top: 5px;
}

.wide-input {
    width: 100%;
}

/* Buttons */
.button-group {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

.action-btn {
    background: linear-gradient(to bottom, #ccc, #888);
    border: 1px solid #444;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    flex: 1;
}

.action-btn:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#btnLimpar {
    /* Style specific if needed */
}

#btnSalvar {
    /* Style specific if needed */
}

/* Table Section */
.table-section {
    margin-top: 20px;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background-color: #fff;
}

thead th {
    background-color: #6da252; /* Match body bg */
    color: #fff;
    border: 1px solid #fff;
    padding: 5px;
    text-transform: uppercase;
    font-weight: bold;
}

tbody td {
    border: 1px solid #000;
    padding: 4px;
    text-align: center;
    font-weight: bold;
}

/* Alternating/Specific row colors based on screenshot */
tbody tr {
    background-color: #6da252; /* Base green */
}

/* Coloring specific columns logic or just simple rows for now.
   The screenshot shows yellow rows. Let's make the rows yellow by default
   as they seem to be the user entered data. */
tbody tr {
    background-color: #ffff00; /* Bright yellow */
}

/* Specific column widths/adjustments */
.col-desc {
    width: 30%;
}

/* Graphic Area (Scale) */
.graphic-area {
    flex: 1;
    background-color: #fff8e1; /* Light beige bg */
    border: 2px solid #000;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 250px;
}

.scale-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.scale-display {
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #e0f0f0;
    padding: 10px;
    width: 120px;
    text-align: center;
    position: relative;
    box-shadow: 3px 3px 0 #888;
}

.scale-screen {
    background-color: #dcedc8;
    border: 2px solid #000;
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    border-radius: 5px;
}

.scale-buttons span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 50%;
    margin: 0 2px;
}

.scale-arrow {
    font-size: 40px;
    color: #e65100;
}

.scale-info-box {
    border: 2px solid #000;
    padding: 5px 10px;
    background-color: #fff;
    border-radius: 5px;
    text-align: center;
}

.scale-title {
    font-size: 12px;
    font-weight: bold;
}

.scale-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.conversion-examples {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    line-height: 1.5;
}