/* LOADING - START */

/* Keep your existing loader-overlay CSS exactly as it is */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.47);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

/* --- NEW WAVE LOADER CSS --- */
.wave-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Space between the rectangles */
    height: 40px;
    margin-bottom: 20px;
}

.wave-loader .bar {
    width: 6px; /* Width of each rectangle */
    height: 35px; /* Max height of the rectangle */
    background-color: #007bff; /* Bright blue from your screenshot. Change to #275bbf for Nokia Blue */
    border-radius: 1px;
    animation: wave-animation 1.2s infinite ease-in-out;
}

/* Stagger the animation start times to create the wave */
/* Note: Using negative delays so they start animating immediately on page load */
.wave-loader .bar:nth-child(1) { animation-delay: -1.2s; }
.wave-loader .bar:nth-child(2) { animation-delay: -1.1s; }
.wave-loader .bar:nth-child(3) { animation-delay: -1.0s; }
.wave-loader .bar:nth-child(4) { animation-delay: -0.9s; }
.wave-loader .bar:nth-child(5) { animation-delay: -0.8s; }

/* The actual scaling animation */
@keyframes wave-animation {
    0%, 40%, 100% {
        transform: scaleY(0.4); /* Shrink to 40% height */
    }
    20% {
        transform: scaleY(1); /* Grow to 100% height */
    }
}

/* LOADING - END */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    font-family: "Source Sans", sans-serif;
}

.main-content {
    flex-grow: 1;
    background-color: #ffffff;
    padding: 50px 70px 160px 70px;
    overflow-y: auto;
}

.nav-bar {
    height: 40px;
    background-color: #005aff;
    padding: 0 12px;

    display: flex;
    align-items: center;
}

.nav-bar > img {
    height: 32px;
    width: auto;
    transform: scale(2.5);
    transform-origin: left center;
    display: block;
}

.layout-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

h1 {
    font-size: 44px;
    font-weight: 700;
    color: rgb(49, 51, 63);
    margin-bottom: 15px;
}



/* TABS STYLES - START */

.tabs-container {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 24px;
}

.tabs {
    display: flex;
    gap: 24px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 10px 4px;
    font-size: 15px;
    font-weight: 500;
    color: #5f6368;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

.tab-btn:hover {
    color: #202124;
}

.tab-btn.active {
    color: #005aff;
    border-bottom: 2px solid #005aff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* TABS STYLES - END */





/* ZONE TAB STYLES - START */

.form-container {
    max-width: 800px; /* Adjust based on your layout */
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 24px;
    color: #202124;
}

/* Layout */
.flex-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    flex: none;
    width: 100%;
}

/* Labels */
label {
    font-size: 13px;
    color: #5f6368;
    margin-bottom: 8px;
    font-weight: 400;
}

/* --- Inputs and Selects --- */

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 20px;
    border: 2px solid transparent;
    border-radius: 6px;
    background-color: #f1f3f4;
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    transition: all 0.15s ease-in-out;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;

    padding-right: 30px;

    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0aec0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    background-size: 10px auto;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: #5469d4;
    box-shadow: 0 0 0 0.05px #5469d4;

    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a0aec0%22%20d%3D%22M287%20223a17.6%2017.6%200%200%201-13%205.4H18.4c-5%200-9.3-1.8-12.9-5.4A17.6%2017.6%200%200%201%200%20210.2c0-5%201.8-9.3%205.4-12.9l128-127.9c3.6-3.6%207.8-5.4%2012.8-5.4s9.2%201.8%2012.8%205.4L287%20197.4c3.5%203.5%205.4%207.8%205.4%2012.8%200%205-1.9%209.2-5.5%2012.8z%22%2F%3E%3C%2Fsvg%3E");
}

/* Esconde a seta nativa no Internet Explorer / Edge antigo */
select::-ms-expand {
    display: none;
}

/* Custom Select Dropdown Wrapper */
.select-wrapper {
    position: relative;
    width: 100%;
}

/* Buttons matching the right side of the first image */
.button-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.btn-outline,
button[type="submit"] {
    background-color: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 6px;
    padding: 10px 24px;
    font-size: 14px;
    font-family: inherit;
    color: #3c4043;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: 500;
}

.btn-outline:hover,
button[type="submit"]:hover {
    background-color: #f8f9fa;
}

/* ZONE TAB STYLES - END */