/* Custom styles for AntiGravity IoT Portal (matching GCP console layout) */

/* LOGIN CARD EXTENSIONS */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f1f3f4;
}

.login-console-card {
    background: #ffffff;
    border: 1px solid #dadce0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    animation: loginCardFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginCardFadeIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* PERIOD TABS (Tag, Woche, Monat, Jahr) */
.btn-period-tab {
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    transition: all 0.2s ease;
}

.btn-period-tab:hover {
    color: var(--text-primary);
    background-color: rgba(0,0,0,0.03);
}

.btn-period-tab.active {
    background: #ffffff;
    color: var(--gcp-blue);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* PROGRESS BAR */
.progress-bar-container-gcp {
    background-color: #e8eaed;
    border-radius: 10px;
    height: 14px;
    width: 100%;
    overflow: hidden;
    margin-top: 5px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.progress-bar-fill-gcp {
    height: 100%;
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-ok {
    background-color: var(--gcp-blue); /* #1a73e8 */
}

.progress-warn {
    background-color: #f4b400; /* GCP Yellow */
}

.progress-critical {
    background-color: #d93025; /* GCP Red */
}

/* INPUT TWEAKS */
.gcp-input:focus {
    border-color: var(--gcp-blue);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
    outline: none;
}

/* ALERTS BACKGROUND */
.error-badge-gcp, .success-badge-gcp {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}

/* SIDEBAR ACTIVE STATE ANIMATION */
.menu-item {
    transition: background-color 0.15s, border-left-color 0.15s;
}

.menu-item.active {
    background-color: var(--gcp-blue-light) !important;
    border-left: 3px solid var(--gcp-blue) !important;
    color: var(--gcp-blue) !important;
}

.menu-item.active i {
    color: var(--gcp-blue) !important;
}